webpack常见优化方法

1. Webpack 的主要作用

1. 模块打包

• 将各种资源（JS、CSS、图片等）视为模块
  

• 把全部模块打包成少量的静态资源文件
  

• 代码转换
  

• 将 ES6+ 转换为 ES5
  

• 将 SCSS/LESS 转换为 CSS
  

• 将 TypeScript 转换为 JavaScript
  

• 文件优化
  

• 压缩代码
  

• 归并文件
  

• 代码分割
  

2. 减小打包体积的方法

• 代码分割 (Code Splitting)
  
• 1. // webpack.config.js
  2. module.exports = {
  3.   optimization: {
  4.     splitChunks: {
  5.       chunks: 'all',
  6.       minSize: 20000,
  7.       minChunks: 1,
  8.       maxAsyncRequests: 30,
  9.       maxInitialRequests: 30,
  10.       cacheGroups: {
  11.         vendors: {
  12.           test: /[\\/]node_modules[\\/]/,
  13.           priority: -10
  14.         },
  15.         default: {
  16.           minChunks: 2,
  17.           priority: -20,
  18.           reuseExistingChunk: true
  19.         }
  20.       }
  21.     }
  22.   }
  23. }

  复制代码
• 压缩代码
  
  1. // webpack.config.js
  2. const TerserPlugin = require('terser-webpack-plugin');
  4. module.exports = {
  5.   optimization: {
  6.     minimize: true,
  7.     minimizer: [new TerserPlugin()],
  8.   }
  9. }

  复制代码

• Tree Shaking（移除未使用的代码）
  1. // package.json
  2. {
  3.   "sideEffects": false
  4. }
  6. // webpack.config.js
  7. module.exports = {
  8.   mode: 'production',  // 启用 tree shaking
  9.   optimization: {
  10.     usedExports: true
  11.   }
  12. }

  复制代码

• 使用动态导入 // 代码中使用动态导入
  
  1. const Component = () => import('./Component.vue')

  复制代码

• 压缩图片
  1. // webpack.config.js
  2. module.exports = {
  3.   module: {
  4.     rules: [
  5.       {
  6.         test: /\.(png|jpg|gif)$/i,
  7.         use: [
  8.           {
  9.             loader: 'image-webpack-loader',
  10.             options: {
  11.               mozjpeg: {
  12.                 progressive: true,
  13.                 quality: 65
  14.               }
  15.             }
  16.           }
  17.         ]
  18.       }
  19.     ]
  20.   }
  21. }

  复制代码

6. 使用 gzip 压缩

1. // webpack.config.js
2. const CompressionPlugin = require('compression-webpack-plugin');
4. module.exports = {
5.   plugins: [
6.     new CompressionPlugin({
7.       algorithm: 'gzip',
8.       test: /\.js$|\.css$|\.html$/,
9.       threshold: 10240,
10.       minRatio: 0.8
11.     })
12.   ]
13. }

复制代码

3. 其他优化建议

• 分析打包巨细
  1. # 使用 webpack-bundle-analyzer 分析包大小
  2. npm install --save-dev webpack-bundle-analyzer

  复制代码

2. 优化第三方库的引入

1. // 按需引入
3. import { Button } from 'element-ui'  // 而不是 import ElementUI from 'element-ui'

复制代码

3. 配置 externals

1. // webpack.config.js
3. module.exports = {
5.   externals: {
7.     'vue': 'Vue',
9.     'vue-router': 'VueRouter',
11.     'vuex': 'Vuex'
13.   }
15. }

复制代码

• 使用 CDN
  1. <!-- index.html -->
  3. <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  复制代码

4. 现实结果监控

• 使用 webpack-bundle-analyzer 检察打包结果
  1. // webpack.config.js
  3. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  5. module.exports = {
  7.   plugins: [
  9.     new BundleAnalyzerPlugin()
  11.   ]
  13. }

  复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。