美文网首页
webpack优化策略篇

webpack优化策略篇

作者: baron65 | 来源:发表于2020-09-06 10:47 被阅读0次

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

相关文章

网友评论

      本文标题:webpack优化策略篇

      本文链接:https://www.haomeiwen.com/subject/ocfcektx.html