vue 项目打包优化（远不止dll）

背景

我们在使用cli创建项目，完成开发后，在项目打包通常会发现很慢。为了优化打包速度，我们可以使用Dll来做这个优化，也可以使用hard-source-webpack-plugin，还可以用thread-loader。

这里我们主要讲Dll，Dll不仅可以在cli的项目中使用，我们也可以单独建立一个webpack文件来进行处理。

 

正文

Step1 我们先创建webpack.dll.js文件,代码如下：

const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: {
  // 自己项目使用的第三方库
    vendor: ['lodash', 'axios', 'vue-router', 'element-ui', 'vue/dist/vue.esm.js']
  },
  output: {
    // 打包后输入路径，可以自行修改
    path: path.join(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      // Tips: DllPlugin的name属性需要和libary保持一致
      name: '[name]_[hash]',
      //指定当前目录
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      // context需要和webpack.config.js保持一致
      context: __dirname
    })
  ]
}

 

Step2 我们需要下载webpack-cli来运行我们的webpack.dll.js

npm install webpack-cli
//查看webpack版本号 webpack -v是无用的
npm info webpack
//Tips: ./webpack.dll.js 路径要写对
//只能在package.json文件的scripts配置"dll": "webpack --config ./webpack.dll.js"
//运行文件
npm run build:dll

package.json增加配置如下

{
  "scripts": {
    "build:dll": "webpack --config ./webpack.dll.js",
  },
}

 

 

 

当我们在package.json文件配好，然后运行命令后，会打包生成vendor-manifest.json文件

 

Step3 在项目中引入我们打包后的json文件

现在已经把第三方的包打包好了，接下来只需要在我们项目中注入即可。

方式有两种：

vue.config.js配置

const webpack = require('webpack')

module.exports = {
    //二者选其一即可
    chainWebpack: config => {
      config.plugin('dll-reference-plugin')
         .use(webpack.DllReferencePlugin)
         .tap(options => {
           options[0] = {
             context: __dirname,
             // manifest就是我们第2步中打包出来的json文件
             manifest: require(path.join(__dirname, `./vendor-manifest.json`))
           }
           return options
         })
    },
    configureWebpack: config => {
      config.plugins.push(new webpack.DllReferencePlugin({
        context: __dirname,
        // manifest就是我们第2步中打包出来的json文件
        manifest: require('./vendor-manifest.json')
      }))
    }
}

 

webpack.config.js配置

const path = require('path');
const webpack = require('webpack')
module.exports = {
  // dll相关配置
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      // manifest就是我们之前打包出来的json文件
      manifest: require('./vendor-manifest.json'),
    })
  ]
}

 

当我们再次打包我们的项目，你会发现打包速度有很明显的改进。

 

结语

   除了上面讲的一种优化方案，我们还可以使用hard-source-webpack-plugin来做这方面的优化，步骤如下：

1.安装

npm install --save-dev hard-source-webpack-plugin 

2.在配置文件使用

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
  // ......  plugins: [
    new HardSourceWebpackPlugin()  
]}

 

     最后的最后，其实我们还可以使用多进程打包thread-loader。请自行前往学习

 

  给朋友们推荐一个前端公众号，里面都是前端技术干货。