wepback 的主要优化方式分为很多种, 下面介绍一下比较实用的几种方式, 在项目中都是可以用到的
编译的时候彩色显示进度时间 好看又装逼
webpack config webpack.config.js--progress--profile--colors
设置打包环境变量为 producation, 可以减小打包后的大小
webpack -p // 会自动将 process.env.NODE_ENV 设置为 production 同时会使用 UglifyJsPlugin
设置 sourceMap, 方便日后 debug(可以在控制台 soure 中看到源文件) 同时应该避免使用 inline - 和 eval - 的 devtool 选项, 因为他们会增打包块的体积
- devtool: process.env.NODE_ENV === 'production' ? cheap - module - source - map: cheap - module - eval - source - map,
- plugins: [new webpack.optimize.UglifyJsPlugin({ // webpack3 配置
- sourceMap: true
- })
- // 同时可以通过在 output 中设置 sourceMapFilename 来指定 map 的位置
- // 如果用了 extract-text-webpack-plugin 插件的话, 将 devtool 选项改成 source-map, 不然的话 CSS 的 sourcemap 不会生效
利用 CommonsChunkPlugin 抽离公共代码 (第三方库等等), 由于第三方库的变动不怎么频繁, 因此我们可以抽离为公共代码, 缓存在浏览器, 这样的话可以减少网络请求, 提升速度
- entry: {
- vendor: ["react", "react-router"] // 定义公共的依赖库
- },plugins: {
- new webpack.optimize.CommonsChunkPlugin({
- name: "vendor",
- // 生成的名字,
- async: true // 异步加载公共块只有当需要用的时候才会下载
- })
- }
利用 require.context 请求某个目录下的所有文件
- require.context(string, boolean ,RegExp)
- // 第一个参数是目录路径
- // 第二个参数是 是否搜索其子目录
- // 第三个参数是 匹配文件的正则表达式
- importAll(r) {
- return r.keys().map(r)
- }
- importAll(require.context('./test', false, /\.js$/)) // 返回一个包含 test 文件夹下所有以 js 结尾的模块的数组
利用 ExtractTextWebpackPlugin 抽离 css 文件
- plugins: [
- new ExtractTextPlugin({
- filename: '[name].css', // string || function
- llChunks: true // boolean
- }),
- ]
利用 scope hoisting 特性减小打包块
- plugins:[
- new webpack.optimize.ModuleConcatenationPlugin() // 只限于 webpack 3.x 版本
- ]
如果每次 build, 我们都会更新 hash 值, 哪怕我们一行代码都没有动过, 也会重新生成, 意味着用户需要重新下载, 没有合理地运用到缓存, 我们可以利用 chunk-manifest-webpack-plugin webpack-chunk-has 来进行缓存, 同时这个插件会降低 build 速度, 所以只建议在生产环境中使用
- const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
- const WebpackChunkHash = require('webpack-chunk-hash');
- const config = {
- plugins: = [
- new WebpackChunkHash(),
- new ChunkManifestPlugin({
- filename: 'chunk-manifest.json',
- manifestVariable: 'webpackManifest',
- inlineManifest: true,
- }),
- new htmlWebpackPlugin({ // 自动在模板文件中生成 chunk-manifest.json
- inlineManifestWebpackName: 'webpackManifest',
- })
- }
来源: http://www.jianshu.com/p/af82440ce23f