[聚合文章] Vue SPA 打包优化实践

这里只需要import进来就行了。

2. 在build目录下新建 webpack.dll.conf.js 配置文件：

var path = require('path')var webpack = require('webpack')var context = path.join(__dirname, '..')module.exports = {  entry: {    vendor: ['./src/vendor.js'] // entry 以项目根目录为起始路径  },  output: {    // 将打包后的 js 放到 static 目录下，build的时候会copy到dist目录    path: path.join(context, 'static/js'),    filename: '[name].dll.js',    library: '[name]'  },  resolve: {    alias: {      'vue$': 'vue/dist/vue.esm.js'    }  },  plugins: [    new webpack.DllPlugin({      path: path.join(context, '[name].manifest.json'),      name: '[name]',      context: context    }),    // 压缩js代码    new webpack.optimize.UglifyJsPlugin({      compress: {        warnings: false      },      output: { // 删除打包后的注释        comments: false      }    })  ]}

这里的 context 非常关键，我这里以项目的根路径作为context，manifest.json的位置可自由定义，name要和output里面的library保持一致。resolve 里将 webpack.base.conf.js 里面的 vue$ copy过来，vue用的是vue.esm.js。需要注意的是 dllPlugin 只支持 Array 类型的 entry。

3. 在 package.json 里面加上 script ：build:all

"scripts": {  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",  "start": "npm run dev",  "lint": "eslint --ext .js,.vue src",  "build": "node build/build.js",  "build:dll": "webpack --config build/webpack.dll.conf.js --progress"}

运行 npm run build:dll，会在 static/js 里面生成 vendor.dll.js