摘要：一緩存失效改變了的一點(diǎn)兒代碼，打包的就會(huì)改變導(dǎo)致每次發(fā)布，的緩存都會(huì)失效。為了解決上述問題，在網(wǎng)上查找資料后，找到使用這個(gè)方案。三對(duì)比結(jié)果優(yōu)化前筆記本上打包時(shí)間為，優(yōu)化后筆記本打包時(shí)間為，同時(shí)也增加了這些庫(kù)的緩存。

在前端項(xiàng)目中，我們希望第三方庫(kù)（vendors）和自己寫的代碼可以分開打包，vue-cli也幫我們配好了webpack的CommonsChunkPlugin，但是在使用vue-cli的打包的過程中有一些痛點(diǎn)。

改變了app.js的一點(diǎn)兒代碼，verdors打包的chunkhash就會(huì)改變,導(dǎo)致每次發(fā)布，vendors的緩存都會(huì)失效。這樣增加了用戶的流量消耗和首屏加載時(shí)間。

在公司的臺(tái)式機(jī)打包一次要花費(fèi)30s，在個(gè)人筆記本上則需要花費(fèi)40s之多。

為了解決上述問題，在網(wǎng)上查找資料后，找到使用 webpack dll這個(gè)方案。

先貼上我的webpack.dll.conf.js配置代碼

var path              = require("path");
var webpack           = require("webpack");
var config            = require("../config")
var ExtractTextPlugin = require("extract-text-webpack-plugin"); // 提取css
var AssetsPlugin = require("assets-webpack-plugin"); // 生成文件名，配合HtmlWebpackPlugin增加打包后dll的緩存
module.exports        = {
  entry: {
    libs: [
      "vue-infinite-scroll",
      "vue-cookie",
      "jquery",
      "iscroll",
      "weui.js",
      "video.js",
      "babel-polyfill",
      "resetcss",
      "font-awesome/css/font-awesome.min.css",
      "video.js/dist/video-js.min.css",
    ]
  },
  output: {
    path: path.resolve(__dirname, "../public"),
    filename: "[name].[chunkhash:7].js",
    library: "[name]_library"
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.resolve(__dirname, "../public/[name]-mainfest.json"),
      name: "[name]_library",
      context: __dirname // 執(zhí)行的上下文環(huán)境，對(duì)之后DllReferencePlugin有用
    }),
    new ExtractTextPlugin("[name].[contenthash:7].css"),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
    }),
    new AssetsPlugin({
      filename: "bundle-config.json",
      path: "./public"
    }),
  ],
  module: {
    rules: [
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: "url-loader",
        query: {
          limit: 10000,
          name: "img/[name].[hash:7].[ext]"
        }
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: "url-loader",
        query: {
          limit: 10000,
          name: "fonts/[name].[hash:7].[ext]"
        }
      }
    ]
  },
}

1、entry配置需要dll打包的庫(kù)

2、module配置處理對(duì)應(yīng)文件類型的loader

3、增加 webpack.DllPlugin插件

1、path:生成mainfest.json文件的絕對(duì)路徑。mainfest.json里面的內(nèi)容為所有被打包到dll.js文件模塊id的映射。

2、name：webpack打包時(shí)mainfest.json包含的庫(kù)的暴露出來的函數(shù)名名

3、contenxt(可選):引入manifest文件的context，默認(rèn)為webpack的context

在webpack.base.conf.js的plugins增加

new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require("../public/libs-mainfest.json") // 指向生成的manifest.json
    }),

注：上面提到通過AssetsPlugin和HtmlWebpackPlugin給打包的dll.js各dll.css增加緩存機(jī)制

AssetsPlugin生成的bundle-config.js

{"libs":{"js":"libs.f7d8ef0.js","css":"libs.e2245d7.css"}}

webpack.dev.conf.js文件增加以下代碼

var bundleConfig = require("../public/bundle-config.json")
new HtmlWebpackPlugin({
      filename: "index.html",
      template: "index.html",
      inject: true,
      libJsName:bundleConfig.libs.js, 
      libCssName:bundleConfig.libs.css,
      env:config.dev.env,

    }),

在index.html引入生成的dll.js,dll.css

上面為開發(fā)環(huán)境的配置，生產(chǎn)環(huán)境對(duì)應(yīng)修改就可以了。

增加build.dll.js文件，

var path              = require("path");
var utils             = require("./utils")

var webpack           = require("webpack");
var config            = require("../config")
var utils             = require("./utils")
var dllConfig         = require("./webpack.dll.conf");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var AssetsPlugin      = require("assets-webpack-plugin");

var chalk = require("chalk")
var rm                = require("rimraf")
var ora = require("ora")
var spinner = ora({
  color: "green",
  text: "正為生產(chǎn)環(huán)境打包dll包，耐心點(diǎn)，不然自動(dòng)關(guān)機(jī)。。。"
})
spinner.start()
rm(path.resolve(__dirname, "../public"),  err => {
  if (err) throw err
  webpack(dllConfig,function (err, stats) {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
          colors: true,
          modules: false,
          children: false,
          chunks: false,
          chunkModules: false
        }) + "

")

    console.log(chalk.cyan("  dll打包完成.
"))
  })
});

然后在package.json script中加上"build:dll": "node build/buildDll.js"

注：開發(fā)和生產(chǎn)環(huán)境都要首先使用 webpack運(yùn)行webpack.dll.conf.js生成dll.js, dll.css, mainfest.json文件，每次改變庫(kù)文件也都需要重新執(zhí)行一遍。

優(yōu)化前筆記本上打包時(shí)間為4000ms，
優(yōu)化后筆記本打包時(shí)間為1800ms，同時(shí)也增加了這些庫(kù)的緩存。