webpack优化

一、使用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 可以实现删除项目中未被引用的代码（死代码）。