摘要：第一步新建一個(gè)名字自己定義值得關(guān)注的是數(shù)組資源依賴包，提前編譯這里根據(jù)自己項(xiàng)目的具體引用情況自行添加資源依賴包，提前編譯定義文件生成的位置的部分由的名字替換輸出到那個(gè)全局變量上和一樣即可。

在使用vue開(kāi)發(fā)單頁(yè)面應(yīng)用時(shí)，隨著項(xiàng)目頁(yè)面的增多，你會(huì)發(fā)現(xiàn)生產(chǎn)環(huán)境的build速度會(huì)很慢，同時(shí)頁(yè)面初始的js大小越來(lái)越大。當(dāng)你無(wú)法忍受的時(shí)候就該優(yōu)化了。

這方面的優(yōu)化無(wú)非就是異步加載、提取一部分長(zhǎng)期不需要更新代碼的基礎(chǔ)js庫(kù)。

可以采用vue-router的路由懶加載點(diǎn)擊鏈接進(jìn)行學(xué)習(xí)

可以學(xué)習(xí)下DllPlugin和DllReferencePlugin兩個(gè)插件，同時(shí)配合（add-asset-html-webpack-plugin）一起完成提取到自動(dòng)引入。

第一步：新建一個(gè)webpack.dll.config.js(名字自己定義)

值得關(guān)注的是lib數(shù)組（資源依賴包，提前編譯）這里根據(jù)自己項(xiàng)目的具體引用情況自行添加

    const webpack = require("webpack");
    const path = require("path");
    const isDebug = process.env.NODE_ENV === "development";
    const outputPath = isDebug ? path.join(__dirname, "../src/common/debug") : path.join(__dirname, "../src/common/dist");
    const fileName = "[name]_[hash].js";
    
    // 資源依賴包，提前編譯
    const lib = [
      "vue",
      "vuex",
      "vue-router",
      "axios",
      "body-parser",
      "cookie-parser",
      "weixin-js-sdk",
      "element-ui",
      "vue-scroll"
    ];
    
    const plugin = [
      new webpack.DllPlugin({
        /**
         * path
         * 定義 manifest 文件生成的位置
         * [name]的部分由entry的名字替換
         */
        path: path.join(outputPath, "manifest.json"),
        /**
         * name
         * dll bundle 輸出到那個(gè)全局變量上
         * 和 output.library 一樣即可。
         */
        name: "[name]_[hash]",
        context: __dirname
      }),
      new webpack.optimize.OccurrenceOrderPlugin()
    ];
    
    if (!isDebug) {
      plugin.push(
        // new webpack.DefinePlugin({
        //   "process.env.NODE_ENV": JSON.stringify("production")
        // }),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          },
          sourceMap: true
        })
      )
    }
    
    module.exports = {
      devtool: "#source-map",
      entry: {
        lib: lib
      },
      output: {
        path: outputPath,
        filename: fileName,
        /**
         * output.library
         * 將會(huì)定義為 window.${output.library}
         * 在這次的例子中，將會(huì)定義為`window.vendor_library`
         */
        library: "[name]_[hash]",
        libraryTarget: "umd",
        umdNamedDefine: true
      },
      plugins: plugin
    }

第二步：執(zhí)行構(gòu)建

簡(jiǎn)單的方式是在package.json文件中添加（需要注意的使用的是webpack2）

"dll-production": "NODE_ENV=production webpack --config  build/webpack.dll.config.js --progress",
"dll-test": "NODE_ENV=development webpack --config  build/webpack.dll.config.js --progress",

然后通過(guò)npm run dll-production 和 npm run dll-test進(jìn)行構(gòu)建
正如NODE_ENV的值一樣不同環(huán)境引用不同路徑下的lib.js
構(gòu)建后目錄如下圖

第三步：引入lib.js

#安裝add-asset-html-webpack-plugin
$ npm install --save-dev add-asset-html-webpack-plugin

修改開(kāi)發(fā)環(huán)境webpack.dev.config.js

#初始化
const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin")

在plugins中添加
new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require(path.join(__dirname, "../src/common/debug/manifest.json"))
}),
new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname, "../src/common/debug/lib_*.js") }),

執(zhí)行npm run dev

修改生產(chǎn)環(huán)境webpack.prod.config.js

#初始化
const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin")

在plugins中添加
new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require(path.join(__dirname, "../src/common/dist/manifest.json"))
}),
new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname, "../src/common/dist/lib_*.js") }),

執(zhí)行npm run build(同時(shí)與以前的構(gòu)建速度對(duì)比，你會(huì)發(fā)現(xiàn)節(jié)省了很多時(shí)間，目前我的項(xiàng)目省了1/3時(shí)長(zhǎng))

共同點(diǎn)：都是提取公共模塊到父模塊中，利用緩存來(lái)提高訪問(wèn)速度（第一次加載除外）
區(qū)別：dll-plugin需要手動(dòng)去配置和打包公共模塊，CommonsChunkPlugin則是每次構(gòu)建時(shí)按照配置打包公共模塊。

使用 DllPlugin 將更改不頻繁的代碼進(jìn)行多帶帶編譯。這將改善引用程序的編譯速度，即使它增加了構(gòu)建過(guò)程的復(fù)雜性。
webpack文檔也推薦使用dll-plugin進(jìn)行公共模塊的分離。