webpack优化

  • webpack优化已关闭评论
  • 21 次浏览
  • A+
所属分类:Web前端
摘要

优化 Loader对于 Loader 来说,影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST,然后对 AST 继续进行转变最后再生成新的代码,项目越大,转换代码越多,效率就越低。


一、使用webpack优化前端性能方法

  • ⽤webpack优化前端性能是指优化webpack的输出结果,让打包的最终结果在浏览器运⾏快速⾼效。
  • 可通过webpack优化前端的手段:
    • 代码压缩(删除多余的代码、注释、简化代码的写法等等⽅式)
      • HTML文件代码压缩
        • 使用HTMLWebpackPlugin插件来生成HTML的模板时候,通过配置属性minify进行HTML优化。
      • CSS代码压缩
        • 利⽤ cssnano (css-loader?minimize)来压缩css。
      • JS代码压缩
        • 利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件。
    • 文件大小压缩
      • 对文件的大小进行压缩,减少http传输过程中宽带的损耗。
    • 图片压缩
    • Tree Shaking
      • 将代码中永远不会⾛到的⽚段删除掉(消除死代码)。可以通过在启动webpack时追加参数 --optimize-minimize 来实现。
    • 代码分离
      • 代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存。
    • 提取公共第三⽅库
      • SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码 。

二、提高webpack构建速度方法

  • 优化webpack构建的方式有很多,主要可以从优化搜索时间、缩小文件搜索范围、减少不必要的编译等方面入手。
    • 优化loader配置
      • 在使用loader时,可以通过配置include、exclude、test属性来匹配文件,缩小文件的搜索范围,优化搜索时间
    • 多⼊⼝情况下,使⽤ CommonsChunkPlugin 来提取公共代码
    • 通过 externals 配置来提取常⽤库,脱离webpack打包,不被打⼊bundle中,从⽽减少打包时间
    • 利⽤ DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引⽤但是绝对不会修改的npm包来进⾏预编译,再通过 DllReferencePlugin 将预编译的模块加载进来,让⼀些基本不会改动的代码先打包成静态资源,避免反复编译浪费时间
    • 使⽤ Happypack 实现多线程加速编译
    • 使⽤ webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采⽤了多核并⾏压缩来提升压缩速度
    • 使⽤ Tree-shaking 和 Scope Hoisting 来剔除多余代码
    • 利⽤缓存提⾼rebuild效率

三、减少webpack打包时间方法

  • 优化 Loader

    • 对于 Loader 来说,影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST,然后对 AST 继续进行转变最后再生成新的代码,项目越大,转换代码越多,效率就越低。

      • 可以将 Babel 编译过的文件缓存起来,下次只需要编译更改过的代码文件即可,这样可以大幅度加快打包时间.

        loaders: ['babel-loader?cacheDirectory=true'] 
      • 优化 Loader 的文件搜索范围。

        • 对于 Babel 来说,希望只作用在 JS 代码上的,然后 node_modules 中使用的代码都是编译过的,所以完全没有必要再去处理一遍。

          module.exports = {     module: { 	rules: [ 	        {	                   // js文件才使用babel 		  test: /.js$/,                   loader: 'babel-loader',                   // 只在src文件夹下查找 		  include: [resolve('src')],                   // 不会去查找的路径 		  exclude: /node_modules/, 		} 	  ]      } } 
  • HappyPack

    • 受限于 Node 是单线程运行的,所以 Webpack 在打包的过程中也是单线程的,特别是在执行 Loader 的时候,长时间编译的任务很多,这样就会导致等待的情况。HappyPack 可以将 Loader 的同步执行转换为并行的,这样就能充分利用系统资源来加快打包效率了。

      module: { 	loaders: [ 		  { 		    test: /.js$/, 		    include: [resolve('src')], 		    exclude: /node_modules/, 		    // id后面的内容对应下面                 loader: 'happypack/loader?id=happybabel' 		  } 	    ] }, plugins: [     new HappyPack({         id: 'happybabel',         loaders: ['babel-loader?cacheDirectory'],         // 开启4个线程         threads: 4     }) ] 
  • DllPlugin

    • DllPlugin 可以将特定的类库提前打包然后引入。这种方式可以极大的减少打包类库的次数,只有当类库更新版本才有需要重新打包,并且也实现了将公共代码抽离成单独文件的优化方案。
  • 代码压缩

    • 在 Webpack3 中,一般使用 UglifyJS 来压缩代码,但是这个是单线程运行的,为了加快效率,可以使用 webpack-parallel-uglify-plugin 来并行运行 UglifyJS,从而提高效率。在 Webpack4 中,不需要以上这些操作了,只需要将 mode 设置为 production 就可以默认开启以上功能。代码压缩也是我们必做的性能优化方案,当然我们不止可以压缩 JS 代码,还可以压缩 HTML、CSS 代码,并且在压缩 JS 代码的过程中,我们还可以通过配置实现比如删除 console.log 这类代码的功能。
  • 其他

    • resolve.extensions
      • 用来表明文件后缀列表,默认查找顺序是 ['.js', '.json'],如果你的导入文件没有添加后缀就会按照这个顺序查找文件。我们应该尽可能减少后缀列表长度,然后将出现频率高的后缀排在前面。
    • resolve.alias
      • 可以通过别名的方式来映射一个路径,能让 Webpack 更快找到路径。
    • module.noParse
      • 如果你确定一个文件下没有其他依赖,就可以使用该属性让 Webpack 不扫描该文件,这种方式对于大型的类库很有帮助。

四、减少webpack打包体积方法

  • 按需加载

    • 在开发 SPA 项目的时候,项目中都会存在很多路由页面。如果将这些页面全部打包进一个 JS 文件的话,虽然将多个请求合并了,但是同样也加载了很多并不需要的代码,耗费了更长的时间。那么为了首页能更快地呈现给用户,希望首页能加载的文件体积越小越好,这时候就可以使用按需加载,将每个路由页面单独打包为一个文件。当然不仅仅路由可以按需加载,对于 loadash 这种大型类库同样可以使用这个功能。
  • Scope Hoisting

    • Scope Hoisting 会分析出模块之间的依赖关系,尽可能的把打包出来的模块合并到一个函数中去。这样的打包方式生成的代码明显比之前的少多了。如果在 Webpack4 中你希望开启这个功能,只需要启用 optimization.concatenateModules 就可以了。

      module.exports = {   optimization: { 	  concatenateModules: true     } } 
  • Tree Shaking

    • Tree Shaking 可以实现删除项目中未被引用的代码(死代码)。