摘要：使用打包的基本上都是獨(dú)立庫(kù)文件，這類(lèi)文件有一個(gè)特性就是變化不大。修改往添加一個(gè)配置只針對(duì)的模塊化有效配置文件詳情請(qǐng)點(diǎn)擊

大概分為以下幾點(diǎn)

通過(guò) externals 配置來(lái)提取常用庫(kù)，引用外鏈

配置CommonsChunkPlugin提取公用代碼 （vue-cli已做）

善用alias（vue-cli配置了一部分）

啟用DllPlugin和DllReferencePlugin預(yù)編譯庫(kù)文件

happypack開(kāi)啟多核構(gòu)建項(xiàng)目

將webpack-parallel-uglify-plugin來(lái)替換webpack本身的UglifyJS來(lái)進(jìn)行代碼壓縮混淆

升級(jí)webpack至3.x版本開(kāi)啟Scope Hoisting

文檔地址 https://doc.webpack-china.org...
防止將某些 import 的包(package)打包到 bundle 中，而是在運(yùn)行時(shí)(runtime)再去從外部獲取這些擴(kuò)展依賴(lài)(external dependencies)。

文檔地址 https://doc.webpack-china.org...
CommonsChunkPlugin 插件，是一個(gè)可選的用于建立一個(gè)獨(dú)立文件(又稱(chēng)作 chunk)的功能，這個(gè)文件包括多個(gè)入口 chunk 的公共模塊。通過(guò)將公共模塊拆出來(lái)，最終合成的文件能夠在最開(kāi)始的時(shí)候加載一次，便存起來(lái)到緩存中供后續(xù)使用。這個(gè)帶來(lái)速度上的提升，因?yàn)闉g覽器會(huì)迅速將公共的代碼從緩存中取出來(lái)，而不是每次訪問(wèn)一個(gè)新頁(yè)面時(shí)，再去加載一個(gè)更大的文件。

文檔地址 https://doc.webpack-china.org...
創(chuàng)建 import 或 require 的別名，來(lái)確保模塊引入變得更簡(jiǎn)單。例如，一些位于 src/ 文件夾下的常用模塊：

文檔地址 https://doc.webpack-china.org...
Dll打包以后是獨(dú)立存在的，只要其包含的庫(kù)沒(méi)有增減、升級(jí)，hash也不會(huì)變化，因此線上的dll代碼不需要隨著版本發(fā)布頻繁更新。使用Dll打包的基本上都是獨(dú)立庫(kù)文件，這類(lèi)文件有一個(gè)特性就是變化不大。，只要包含的庫(kù)沒(méi)有升級(jí)， 增減，就不需要重新打包。這樣也提高了構(gòu)建速度。
一般是用于打包階段

在build文件夾下新建webpack.dll.conf.js文件

var path = require("path");
var webpack = require("webpack");
var AssetsPlugin = require("assets-webpack-plugin");
var CleanWebpackPlugin = require("clean-webpack-plugin");
var config = require("../config");
var env = config.build.env;

module.exports = {
  entry: {
    libs: [
      "babel-polyfill",
      "vue/dist/vue.esm.js",
      "vue-router",
      "vuex",
      "element-ui",
      "echarts",
      "mockjs",
    ],
  },
  output: {
    path: path.resolve(__dirname, "../libs"),
    filename: "[name].[chunkhash:7].js",
    library: "[name]_library",
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": env,
    }),
    new webpack.DllPlugin({
      path: path.resolve(__dirname, "../libs/[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: "./libs",
    }),
    new CleanWebpackPlugin(["libs"], {
      root: path.join(__dirname, "../"), // 絕對(duì)路徑
      verbose: true,
      dry: false,
    }),
  ],
  module: {
    rules: [
      {
        test: /.js$/,
        loader: "babel-loader",
      },
    ],
  },
};

在build文件夾下新建build-dll.js文件

var path = require("path");
var webpack = require("webpack");
var dllConfig = require("./webpack.dll.conf");
var chalk = require("chalk");
var rm = require("rimraf");
var ora = require("ora");

var spinner = ora({
  color: "green",
  text: "building for Dll..."
});
spinner.start();
rm(path.resolve(__dirname, "../libs"), 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(" build dll succeed !.
"));
  });
});

修改webpack.prod.conf.js文件

var bundleConfig = require("../libs/bundle-config.json");
...
...
plugins: [
  // 增加DllReferencePlugin配置
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require("../libs/libs-mainfest.json") // 指向生成的manifest.json
  }),
  ...
  ...
  new HtmlWebpackPlugin({
    ...
    // 增加兩個(gè)變量
    libJsName: bundleConfig.libs.js,
    libCssName: bundleConfig.libs.css,
  }),
  ...
  ...
  // 增加一個(gè)靜態(tài)文件目錄
   new CopyWebpackPlugin([
     ...
     ...
    {
      from: path.resolve(__dirname, "../libs"),
      to: config.build.assetsSubDirectory,
      ignore: ["*.json"]
    }
  ])
]

修改模版文件index.html

  

  
  <% if (htmlWebpackPlugin.options.libCssName){ %>
    
  <% } %>

  <% if (htmlWebpackPlugin.options.libJsName){ %>
      
  <% } %>

修改package.json，增加scripts

"scripts": {
  // 增加
  "dll": "node build/build-dll.js"
},

npm run dll先執(zhí)行預(yù)編譯，然后在打包項(xiàng)目文件，如果引入的類(lèi)庫(kù)文件沒(méi)有變更就不再需要再次執(zhí)行預(yù)編譯

文檔地址 https://github.com/amireh/hap...
一般node.js是單線程執(zhí)行編譯，而happypack則是啟動(dòng)node的多線程進(jìn)行構(gòu)建，大大提高了構(gòu)建速度。
在插件中new一個(gè)新的happypack進(jìn)程出來(lái)，然后再使用使用loader的地方替換成對(duì)應(yīng)的id

修改webpack.base.conf.js文件

var HappyPack = require("happypack");
var os = require("os");
var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
...
...
// 增加plugins
 plugins: [
  new HappyPack({
    id: "happy-babel-js",
    loaders: ["babel-loader?cacheDirectory=true"],
    threadPool: happyThreadPool,
  })
]
...
...
// 修改對(duì)應(yīng)loader
{
  test: /.js$/,
  loader: "happypack/loader?id=happy-babel-js",
  include: [resolve("src"), resolve("test")],
}

文檔地址 https://github.com/gdborton/w...
webpack提供的UglifyJS插件由于采用單線程壓縮，速度很慢 ,
webpack-parallel-uglify-plugin插件可以并行運(yùn)行UglifyJS插件，這可以有效減少構(gòu)建時(shí)間。

修改webpack.prod.conf.js文件

var ParallelUglifyPlugin = require("webpack-parallel-uglify-plugin");
...
...
// 刪掉webpack提供的UglifyJS插件
// new webpack.optimize.UglifyJsPlugin({
//   compress: {
//     warnings: false,
//     drop_console: true
//   },
//   sourceMap: true
// }),
// 增加 webpack-parallel-uglify-plugin來(lái)替換
new ParallelUglifyPlugin({
  cacheDir: ".cache/",
  uglifyJS:{
    output: {
      comments: false
    },
    compress: {
      warnings: false
    }
  }
}),

webpack3新特性一覽 https://juejin.im/entry/59714...
webpack 3.x 提供了一個(gè)新的功能：Scope Hoisting，又譯作“作用域提升”。只需在配置文件中添加一個(gè)新的插件，就可以讓 Webpack 打包出來(lái)的代碼文件更小、運(yùn)行的更快。

修改webpack.prod.conf.js

...
...
plugins: [
  // 往plugins添加一個(gè)配置
  // ps 只針對(duì)es6的模塊化有效
  new webpack.optimize.ModuleConcatenationPlugin(),
]

ps：配置文件詳情請(qǐng)點(diǎn)擊 https://github.com/liaoyinglo...