如何减少vendor.js文件的大小，加快打包速度

时间 2020-01-23

标签如何减少 vendor.js vendor 文件大小加快打包速度栏目 JavaScript 繁體版

原文原文链接

一、webpack3打包第三方模块配置

// 打包第三方插件
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: '[name].js',
      // 能够是已经存在的chunk（通常指入口文件）对应的name，那么就会把公共模块代码合并到这个chunk上；不然，会建立名字为name的commons chunk进行合并
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
      // chunks： 指定source chunk，即指定从哪些chunk当中去找公共模块，省略该选项的时候，默认就是entry chunks
    }),

上述配置将会将node_modules中被main.js入口文件（以及子文件）引用的js文件打包合并。当引用的第三方模块越多或者比较大时，打包成的vendor.js文件也会比较大，会严重下降打包速度和页面加载速度。在vue项目中webpack将会把vue.js、vue-router.js、vuex.js、element-ui.js等文件打包到vendor.js中，可是这些文件都是能够经过CDN引入的，特别是element-ui.js文件比较大，使用CDN引入会大大减少vendor.js文件大小。下面咱们试试经过CDN引入第三方模块能不能加快打包速度和下降vendor.js大小。css

一、在index.html模板中经过CDN引入第三方模块

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>vue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
  </body>
</html>

二、在webpack.base.conf.js中加入externals外部扩展

这里解释一下externals 配置选项的做用：html

官网解释：

webpack 中的 externals 配置提供了 不从 bundle 中引用依赖的方式。解决的是，所建立的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。

怎么理解呢，意思是若是须要引用一个库，可是又不想让webpack打包（减小打包的时间），而且又不影响咱们在程序中以CMD、AMD或者window/global全局等方式进行使用（通常都以import方式引用使用），那就能够经过配置externals。vue

这样作的目的就是将不怎么须要更新的第三方库脱离webpack打包，不被打入bundle中，从而减小打包时间，但又不影响运用第三方库的方式，例如import方式等。node

好比：上图咱们配置了'element-ui': 'ELEMENT'，其中'ELEMENT'是<script src="https://unpkg.com/element-ui/lib/index.js"></script>导入的模块名，'element-ui': 'ELEMENT'就是进行了一个映射，模块名变成了'element-ui'，在main.js中咱们仍是能够经过import ElementUI from 'element-ui'引入。externals配置就是让咱们仍是可以import等方式引入模块，虽然模块是经过CDN引入
webpack

三、打包对比

引入node_modules中模块：

CDN引入模块：

能够看到vendor.js文件大大减少，打包速度也快了不少web

参考：
https://www.jianshu.com/p/283b17d17b3cvue-router