Skip to main content

如何利用 Webpack 来优化前端性能

配置

  1. 开发环境时开启缓存，在 config 中将 cache 设为 true
  2. 生产环境时关闭不必要的环节，可以关闭 source-map 源代码映射

loader

  1. 优化 loader 配置，精简 test、include、exclude

plugins

  1. tree-shaking 移除未使用的代码，减小文件体积

  2. 通过 CommonsChunkPlugin 提取公共代码

  3. 通过 plugins 压缩代码

    • uglifyjs-webpack-plugin 压缩 js
    • extract-text-webpack-plugin 压缩 css

参考文章​