webpack打包优化

此篇分享为 vue-cli2.0 中 webpack 的优化配置。 1、按需引入组件 例如引入 element-ui ，用到哪些组件就引哪些 import {Button,Dialog} from 'element-ui'; Vue.use(Button); // 按钮组件 Vue.use(Dialog); // 对话框组件 2、externals 属性 webpack的externals属性，将公共的或不常改动的第三方包名称，配置在属性中，打包时会自动忽略当中的包。具体实现如下： 在 build/webpack.base.conf.js文件中： module.exports = { externals: { Vue: 'Vue', Axios: 'axios' } } // 其中的 key--对应 import Axios名称，value--对应原始方法名称 需要在根目录，index.html 中引入一下 3、给定文件匹配范围 include 规定需要处理的文件有哪些 enclude 排除不需要处理的文件夹 { test: /\.js$/, loader: 'babel-loader', include: [resolve('src')], exclude: /node_modules/ } 4、noParse 属性 过滤掉不需要解析的文件 { module: { noParse: /jquery/, rule: [ ... ] } } 5、cacheDirectory 缓存属性 babel-loader提供了cacheDirectory选项参数，默认为false。 设置空或true时，会利用系统的临时文件夹缓存经过 babel 处理好的模块，对于 rebuild js 有着非常大的性能提升。 { test: /\.js$/, loader: 'babel-loader?cacheDirectory', include: [resolve('src')], exclude: /node_modules/ } 6、happyPack 多个子进程并行 webpack 在打包过程中，loader 转化js、css、img等文件是同步进行的，一个一个的转换。 happyPack 的原理是，将这些任务分解到多个子进程中，并行执行，执行完成后把结果发送到主进程，从而减少整体的打包时间。 第一步：安装 npm install happypack -D 第二步：引入和配置 修改 build/webpack.base.conf.js 文件的 module.rules 配置： { test: /\.vue$/, loader: 'happypack/loader?id=happyVue' }, { test: /\.js$/, loader: 'happypack/loader?id=happyBabel', include: [resolve('src')], exclude: /node_modules/ } 生产环境的话添加 build/webpack.prod.conf.js 文件配置： const vueLoaderConfig = require('./vue-loader.conf') const HappyPack = require('happypack') const os = require('os') // 创建共享进程池 const HappyPackThreadPool = HappyPack.ThreadPool({size:os.cpus().length}) plugins: [ ... new HappyPack({ id: 'happyVue', // 唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件 loaders: [{ loader: 'vue-loader', options: vueLoaderConfig }], threadPoll: HappyPackThreadPool }), new HappyPack({ id: 'happyBabel', loaders: ['babel-loader?cacheDirectory'], threadPoll: HappyPackThreadPool }) ... ] 7、使用 DllPlugin 和 DllReferencePlugin 此方法是独立于 webpack 配置的。 1.在 build 下新建一个webpack.dll.conf.js文件内容如下： const path = require('path') const webpack = require('webpack') const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { entry: { vendor: ['vue', 'vue-router'] }, output: { path: path.resolve('./static'), filename: '[name].dll.js', library: '[name]' }, plugins: [ new webpack.DllPlugin({ path: path.resolve('./static', '[name]-manifest.json'), name: '[name]' }), // 建议代码压缩，否则dll包会比较大。 new UglifyJsPlugin() ] } 文件会生成在 static 目录中。 2.在 build/webpack.prod.conf.js 的 plugin 加入如下配置： new webpack.DllReferencePlugin({ manifest: require('../static/vendor-manifest.json') }) 3.在 package.json 中添加快捷命令： "scripts": { "build": "node build/build.js", "build:dll": "webpack --config build/webpack.dll.conf.js" } 4.在根目录 index.html 中添加引用 生产环境打包时，先执行npm run build:dll生成文件，然后再执行npm run build即可。 和 externals不同点是，有时项目会用到npm上没有的包，这种情景就可以用DLLPlugin单独打包成文件引用。