题目

在前端项目中，我们愿望第三方库（vendors）和本身写的代码能够离开打包，vue-cli也帮我们配好了webpack的CommonsChunkPlugin，但是在运用vue-cli的打包的历程中有一些痛点。

一、verdors缓存失效

转变了app.js的一点儿代码，verdors打包的chunkhash就会转变,致使每次宣布，vendors的缓存都邑失效。如许增添了用户的流量斲丧和首屏加载时候。

二、项目打包时候太长

在公司的台式机打包一次要花费30s，在个人笔记本上则须要花费40s之多。

为了处置惩罚上述题目，在网上查找材料后，找到运用 webpack dll这个计划。

处置惩罚历程

　一、编写dll设置文件

先贴上我的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 // 实行的上下文环境，对以后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打包的库
• 2、module设置处置惩罚对应文件范例的loader

• 3、增添 webpack.DllPlugin插件

  • 1、path:天生mainfest.json文件的绝对路径。mainfest.json内里的内容为一切被打包到dll.js文件模块id的映照。
  • 2、name：webpack打包时mainfest.json包括的库的暴露出来的函数名名
  • 3、contenxt(可选):引入manifest文件的context，默以为webpack的context

二、修正webpack.base.conf.js

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

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

注：上面提到经由过程AssetsPlugin和HtmlWebpackPlugin给打包的dll.js各dll.css增添缓存机制

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

  <link rel="stylesheet" href="./public/<%= htmlWebpackPlugin.options.libCssName %>">
  <script src="./public/<%= htmlWebpackPlugin.options.libJsName %>"></script>

上面为开辟环境的设置，临盆环境对应修正就能够了。

• 增添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: '正为临盆环境打包dll包，耐烦点，不然自动关机。。。'
})
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
        }) + '\n\n')

    console.log(chalk.cyan('  dll打包完成.\n'))
  })
});

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

注：开辟和临盆环境都要起首运用 webpack运转webpack.dll.conf.js天生dll.js, dll.css, mainfest.json文件，每次转变库文件也都须要从新实行一遍。

三、对照效果

优化前笔记本上打包时候为4000ms，
优化后笔记本打包时候为1800ms，同时也增添了这些库的缓存。