vue +webpack 打包配置优化

1.利用DllPlugin，DllReferencePlugin ，UglifyJsPlugin分离第三方库文件，使打包后的vendor文件变小。

DllPlugin通过entry获取config中library的第三方库，和我们开发代码进行分离，生成一个独立的js 文件

UglifyJsPlugin 是将js 进行打包 ，DllReferencePlugin 引入解析打包后的第三方库文件

首先需要添加webpack.dll.conf.js 文件，该文件的配置如下：

const path = require('path')
const webpack = require('webpack')
const {library} = require('../config')
module.exports = {
  entry: library.entry,
  output: {
    path: path.join(__dirname, '../dll'),
    filename: `[name].${library.version}.dll.js`,
    library: '[name]_library' // vendor.dll.js中暴露出的全局变量名
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name].manifest.json'),
      name: '[name]_library'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

　在config.的index.js 中配置第三方库

  /**
   * 库文件
   */
  library: {
    /**
     * node_module
     */
    entry: {
      'vueBucket': [
        'vue',
        'vue-router',
        'vuex',
        'axios',
        'moment'
      ]
    },
    pluginsCss: {
      global: [{
        name: 'element-ui',
        path: './src/assets/css/theme-default/index.css',
        font: './src/assets/css/theme-default/fonts'
      },
      {
        name: 'vue2-animate',
        path: './node_modules/vue2-animate/dist/vue2-animate.min.css'
      }, {
        name: 'iconfont',
        path: './src/assets/css/iconfont.css',
        font: 'src/assets/css/fonts'
      }
      ]
    },
    // 版本
    version: 'v1.0'
  },

　　在webpack.base.conf.js 中配置引用

 plugins: [
    // 解析DllPlugin 打包的node_module
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'),
      manifest: require('./vueBucket.manifest.json')
    })
  ]

　在package.json 中配置，打包第三库文件的命令

 "dll": "webpack --config build/webpack.dll.conf.js",

　执行 npm run dll ，后再次打包，发现vendor 文件变小了　

　

　

转载于:https://www.cnblogs.com/caolidan/p/11023417.html