如何減少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