webpack优化策略篇

webpack优化策略

量化工具：

    speed-measure-webpack-plugin 测量各个插件和loader所花费的时间。
    webpack-boundle-analyzer 分析打包后的文件大小

共性优化策略：

    1.减小文件搜索范围
         resolve.modules ：配置模块库（即 node_modules）所在的位置
         loader配置include\exclude
         module.noParse 不需要解析某些模块的依赖（这些模块并没有依
       赖，或者并根本就没有模块化）jquery \ lodash \ moment
    2.happyPack 加速代码构建 或者 thread-loader
      利用cpu多核，采用多个子进程去解析和遍历js\css.完成后再发到主进程
    3.优化babel-loader 
        cacheDirectory 为true
        引入cache-loader 在性能开销较大的loader之前添加，存在磁盘中
    4.不需要打包编译的插件库换成全局<script>标签引入的方式 
        例如： react / react-dom / jquery 等
        然后在webpack配置里使用 expose-loader  
                            或 externals 
                            或 ProvidePlugin  
        提供给模块内部使用相应的变量
    5.合理抽离公共代码
        CommonsChunkPlugin  / webpack4的 optimization.splitChunks
    6.代码层面
        没有使用到的依赖不要引入.
        按模块化的方式引入其中一部分  
            import debounce from 'lodash/debounce';
    7.采用异步加载，使用代码切割 import()  / reuqire.ensure 
    8.IgnorePlugin 忽略第三方包指定目录
        例如：忽略moment下的.locale包，然后在使用的时候指定具体与语言
        new  webpack.IgnorePlugin(/^\.\/locale$/,/moment$/)
        import 'moment/locale/zh-cn'

区分环境，分开配置

  开发环境：
      1.免刷新：
          --hot 热更新热替换，不丢失状态
      2.提高构建速度：                
          DllPlugin  /  DllReferencePlugin 把第三方库代码分离开（对于依赖的第三方库打包成动态链接库）                
          拷贝静态文件 copy-webpack-plugin
      3.不做无意义的操作：
          比如：开发环境不需要 代码压缩、目录内容清理、计算文件hash、提取CSS文件   
      4.选择合适的devtool .

  生产环境：
      多线程压缩文件 ParallelUglifyPlugin  / TerserPlugin：
          【webpack自带的UglifyJS是单线程压缩输出】

如何使用tree-shaking？

  1）.确保代码是es6格式,即 export，import

   2）.package.json中，设置sideEffects

   3）.确保tree-shaking的函数没有副作用

    4）.babelrc中设置presets [["env", { "modules": false }]] 禁止转换模块，交由webpack进行模块化处理

    5）.结合uglifyjs-webpack-plugin

最后编辑于：2020.09.15 16:09:38