前端脚手架是基于Vue CLI的 https://cli.vuejs.org/zh/guide/

查看 webpack 配置

vue/cli 对 webpack 配置进行了抽象，所以理解配置中包含的东西会比较困难，尤其是当你打算自行对其调整的时候。
vue-cli-service 暴露了 inspect 命令用于查看 webpack 配置。

  1. vue inspect > ouput.js --mode production

生成的文件就是 webpack 的配置：

  1. {
  2.   mode: 'production',
  3.   context: '...',
  4.   devtool: '#cheap-module-eval-source-map',
  5.   node: {...},
  6.   output: {...},
  7.   resolve: {...},
  8.   resolveLoader: {...},
  9.   module: {...},
  10.   optimization: {...},
  11.   plugins: [...],
  12.   performance: {...},
  13.   entry: './src/main'
  14. }

vue-cli 默认配置已经添加了很多常用的优化，包括：

  • cache-loader 提高二次构建速度
  • url-loader小于 4K 的图片会转base64
  • mini-css-extract-plugin，提取css
  • thread-loader 多进程构建
  • splitChunks 代码分割
  • terser 代码压缩
  • preload-webpack-plugin：入口加上preload，按需加载文件加上prefetch

输出文件分析

使用 webpack-bundle-analyzer 分析打包文件的体积和构成

https://www.npmjs.com/package/webpack-bundle-analyzer

vue/cli 中内置了 webpack-bundle-analyzer 插件，默认情况下，可使用vue-cli-service build --report生成分析文件。
在dist目录下会有report.html文件

image.png

可以看出：

  • 打包出的文件中都包含了什么
  • 每个文件的尺寸在总体中的占比，一眼看出哪些文件尺寸大
  • 每个文件的 Gzip 后的大小

代码分割

使用 Webpack4 内置的 splitChunks 插件 进行代码分割
默认的配置：

  1. splitChunks: {
  2.   cacheGroups: {
  3.     vendors: {
  4.       name: 'chunk-vendors',
  5.       test: /[\\/]node_modules[\\/]/,
  6.       priority: -10,
  7.       chunks: 'initial'
  8.     },
  9.       common: {
  10.         name: 'chunk-common',
  11.         minChunks: 2,
  12.         priority: -20,
  13.         chunks: 'initial',
  14.         reuseExistingChunk: true
  15.       }
  16.   }
  17.  }
  • 重要的参数chunks：
    • 默认是 async ：只提取异步加载的模块出来打包到一个文件中
    • initial：提取同步加载和异步加载模块到不同的文件中
    • all：不管异步加载还是同步加载的模块都提取出来，打包到一个文件中

其他参数可以查看文件 https://webpack.docschina.org/plugins/split-chunks-plugin

拆除一下基础包，如element-ui、echarts等

  1.       config.optimization.splitChunks({
  2.         chunks: 'all',
  3.         cacheGroups: {
  4.           vendors: {
  5.             name: 'chunk-vendors',
  6.             test: /[\\/]node_modules[\\/]/,
  7.             priority: -10,
  8.             chunks: 'initial'
  9.           },
  10.           common: {
  11.             name: 'chunk-common',
  12.             minChunks: 2,
  13.             priority: -20,
  14.             reuseExistingChunk: true
  15.           },
  16.           echarts: {
  17.             name: 'chunk-echarts',
  18.             priority: 10,
  19.             test: /[\\/]node_modules[\\/]echarts[\\/]/
  20.           },
  21.           elementUI: {
  22.             name: 'chunk-elementui',
  23.             test: /[\\/]node_modules[\\/]element-ui[\\/]/,
  24.             priority: 10 //
  25.           },
  26.           ...
  27.         }
  28.       });

再重新构建查看 report 文件：
image.png

其余配置

  • 删除 moment 多余的语言包

    1. configureWebpack: {
    2.   plugins: [
    3.     new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn|en-gb/)
    4.   ]
    5. }

  • sourcemap 类型，生产模式不推荐开启：

    1. configureWebpack: {
    2.   devtool: '#cheap-module-eval-source-map',
    3. }

参考: https://staven630.github.io/vue-cli4-config/#moment