vue webpack项目打包优化，从60s到17s的优化之路

下面就进入本文的正题了：

对本文感兴趣的，想必都有一定的开发经验了，对webpack工具也有了一定的了解。只是在webpack生态里面有太多的插件了，除了默认推荐的插件之外，不知道怎么找更好用的插件，其实当初，我也有和你一样的困惑，只是我喜欢钻研，喜欢尝试。基于webpack的项目啦都有一个弊端，项目体积越大，打包耗时越长。下面就把我优化项目的案例展示给你。激动么~~~

Vue 项目比较大．或者说项目中引入了许多第三方库，那么在执行 npm run build 构建项目的时候会极其的慢．比如我现在的项目就每次打包就要大概60s的样子，打包出来的项目文件大概36M左右。

下面就是我整理的一些优化技巧，可以有效地提高打包速度。

我希望你可以根据每一步完成之后都运行npm run build打包一下，比较下每步的构建时长。

一、配置 resolve.modules

1，优化原理

（1）webpack 的 resolve.modules 是用来配置模块库（即 node_modules）所在的位置。当 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时，它便会到 node_modules 目录下去找。

（2）在默认配置下，webpack 会采用向上递归搜索的方式去寻找。但通常项目目录里只有一个 node_modules，且是在项目根目录。为了减少搜索范围，我们可以直接写明 node_modules 的全路径。

2，操作步骤

（1）打开 build/webpack.base.conf.js 文件，添加如下配置：

module.exports = {

  resolve: {

    extensions: ['.js', '.vue', '.json'],

    modules: [

      resolve('src'),

       resolve('node_modules') 

    ],

    alias: {

      'vue$': 'vue/dist/vue.esm.js',

      '@': resolve('src'),

    }

  },

二、配置装载机的 include & exclude

1，优化原理

（1）webpack 的装载机（loaders）里的每个子项都可以有 include 和 exclude 属性：

• include：导入的文件将由加载程序转换的路径或文件数组（把要处理的目录包括进来）
• exclude：不能满足的条件（排除不处理的目录）

（2）我们可以使用 include 更精确地指定要处理的目录，这可以减少不必要的遍历，从而减少性能损失。

（3）同时使用 exclude 对于已经明确知道的，不需要处理的目录，予以排除，从而进一步提升性能。

2，操作步骤

（1）打开 build/webpack.base.conf.js 文件，添加如下配置：

module: {

  rules: [

    {

      test: /\.vue$/,

      loader: 'vue-loader',

      options: vueLoaderConfig,

      include: [resolve('src')],

      exclude: /node_modules\/(?!(autotrack|dom-utils))|vendor\.dll\.js/

    },

    {

      test: /\.js$/,

      loader: 'babel-loader',

      include: [resolve('src')],

      exclude: /node_modules/

    },

（2）保存后再次构建项目，可以发现时间又缩短了 2s 左右。

三、使用 webpack-parallel-uglify-plugin 插件来压缩代码

1，优化原理

（1）默认情况下 webpack 使用 UglifyJS 插件进行代码压缩，但由于其采用单线程压缩，速度很慢。

（2）我们可以改用 webpack-parallel-uglify-plugin 插件，它可以并行运行 UglifyJS 插件，从而更加充分、合理的使用 CPU 资源，从而大大减少构建时间。

2，操作步骤

（1）执行如下命令安装 webpack-parallel-uglify-plugin

npm i webpack-parallel-uglify-plugin -D

（2）打开 build/webpack.prod.conf.js 文件，并作如下修改：

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

//....

    // 删掉webpack提供的UglifyJS插件

    //new UglifyJsPlugin({

    //  uglifyOptions: {

    //    compress: {

    //      warnings: false

    //    }

    //  },

    //  sourceMap: config.build.productionSourceMap,

    //  parallel: true

    //}),

    // 增加 webpack-parallel-uglify-plugin来替换

    new ParallelUglifyPlugin({

      cacheDir: '.cache/',

      uglifyJS:{

        output: {

          comments: false

        },

        compress: {

          warnings: false

        }

      }

    }),

（3）保存后再次构建项目，可以发现时间又缩短了 10s 左右。

四、使用 HappyPack 来加速代码构建

1，优化原理

（1）由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的事情只能一件一件地做，不能多件事一起做。

（2）而 HappyPack 的处理思路是：将原有的 webpack 对 loader 的执行过程，从单一进程的形式扩展多进程模式，从而加速代码构建。

2，操作步骤

（1）执行如下命令安装 happypack：

1	npm i happypack os -D

（2）打开 build/webpack.base.conf.js 文件，并作如下修改：

const HappyPack = require('happypack');

const os = require('os');

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

 

module.exports = {

  module: {

    rules: [

      {

        test: /\.js$/,

        //把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行

        loader: 'happypack/loader?id=happyBabel',

        include: [resolve('src')],

        //排除node_modules 目录下的文件

        exclude: /node_modules/

      },

    ]

  },

  plugins: [

    new HappyPack({

        //用id来标识 happypack处理那里类文件

      id: 'happyBabel',

      //如何处理  用法和loader 的配置一样

      loaders: [{

        loader: 'babel-loader?cacheDirectory=true',

      }],

      //共享进程池

      threadPool: happyThreadPool,

      //允许 HappyPack 输出日志

      verbose: true,

    })

  ]

}

（3）保存后再次构建项目，可以发现时间又缩短到了17s左右。打包出来的项目文件只有7M多了（忘记截图了）。

扣个666！！！

你的构建时长有没有减少到一半以上啦，有的话就恭喜你了。看看你打包出来的项目文件是不是也小了许多。

有时候需要重复构建一下，才能看到大的变化。

》》》你是不是在打包前还在手动删除dist文件？？？

解决方法：安装，     npm i clean-webpack-plugin   -D

然后修改webpack.prod.conf.js文件：

const CleanWebpackPlugin = require("clean-webpack-plugin");

plugins: [

new CleanWebpackPlugin(["dist"], {}),//把代码加在此处，每次构建前都会自动删除dist文件

至此构建优化的就全部结束了！！！

 

对webpack比较熟悉的的朋友可以不看下面的内容。

webpack是现代前端开发中最火的模块打包工具，只需要通过简单的配置，便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置，便可以轻松实现对代码的构建呢？

webpack的配置详解

const path = require('path');
module.exports = {
entry: "./app/entry", // string | object | array
// Webpack打包的入口
output: { // 定义webpack如何输出的选项
path: path.resolve(__dirname, "dist"), // string
// 所有输出文件的目标路径
filename: "[chunkhash].js", // string
// 「入口(entry chunk)」文件命名模版
publicPath: "/assets/", // string
// 构建文件的输出目录
/* 其它高级配置 */
},
module: { // 模块相关配置
rules: [ // 配置模块loaders，解析规则
{
test: /.jsx?$/, // RegExp | string
include: [ // 和test一样，必须匹配选项
path.resolve(__dirname, "app")
],
exclude: [ // 必不匹配选项（优先级高于test和include）
path.resolve(__dirname, "app/demo-files")
],
loader: "babel-loader", // 模块上下文解析
options: { // loader的可选项
presets: ["es2015"]
},
},
},
resolve: { // 解析模块的可选项
modules: [ // 模块的查找目录"node_modules",
path.resolve(__dirname, "app")
],
extensions: [".js", ".json", ".jsx", ".css"], // 用到的文件的扩展
alias: { // 模块别名列表
"module": "new-module"
},
},
devtool: "source-map", // enum
// 为浏览器开发者工具添加元数据增强调试
plugins: [ // 附加插件列表
// ...
],
}

从上面我萌可以看到，webpack配置中需要理解几个核心的概念 Entry 、 Output 、 Loaders 、 Plugins 、 Chunk

• Entry：指定webpack开始构建的入口模块，从该模块开始构建并计算出直接或间接依赖的模块或者库
• Output：告诉webpack如何命名输出的文件以及输出的目录
• Loaders：由于webpack只能处理javascript，所以我萌需要对一些非js文件处理成webpack能够处理的模块，比如sass文件
• Plugins： Loaders 将各类型的文件处理成webpack能够处理的模块， plugins 有着很强的能力。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。但也是最复杂的一个。比如对js文件进行压缩优化的 UglifyJsPlugin 插件
• Chunk：coding split的产物，我萌可以对一些代码打包成一个单独的chunk，比如某些公共模块，去重，更好的利用缓存。或者按需加载某些功能模块，优化加载时间。在webpack3及以前我萌都利用 CommonsChunkPlugin 将一些公共代码分割成一个chunk，实现单独加载。在webpack4 中 CommonsChunkPlugin 被废弃，使用 SplitChunksPlugin

 好了，写了一天写累了，喝杯茶休息一下，感觉的可以继续关注我，后续还有很多干货更新啦！！！

谢谢你的拜读和支持！！！！

 

总结几个webpack打包优化的方法

为什么要优化打包？

• 项目越做越大，依赖包越来越多，打包文件太大
• 单页面应用首页白屏时间长，用户体验差

我们的目的

• 减小打包后的文件大小
• 首页按需引入文件
• 优化 webpack 打包时间

优化方式

1、 按需加载

1.1 路由组件按需加载

const router = [
  {
    path: '/index',
    component: resolve => require.ensure([], () => resolve(require('@/components/index')))
  },
  {
    path: '/about',
    component: resolve => require.ensure([], () => resolve(require('@/components/about')))
  }
]
 

1.2 第三方组件和插件。按需加载需引入第三方组件

// 引入全部组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

// 按需引入组件
import { Button } from 'element-ui'
Vue.component(Button.name, Button)
 

1.3 对于一些插件，如果只是在个别组件中用的到，也可以不要在 main.js 里面引入，而是在组件中按需引入

// 在main.js引入
import Vue from vue
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

// 按组件按需引入
import { Vuelidate } from 'vuelidate'
 

2、优化 loader 配置

• 优化正则匹配
• 通过 cacheDirectory 选项开启缓存
• 通过 include、exclude 来减少被处理的文件。

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader?cacheDirectory',
      include: [resolve('src')]
    }
  ]
}
 

3、优化文件路径——省下搜索文件的时间

• extension 配置之后可以不用在 require 或是 import 的时候加文件扩展名,会依次尝试添加扩展名进行匹配。
• mainFiles 配置后不用加入文件名，会依次尝试添加的文件名进行匹配
• alias 通过配置别名可以加快 webpack 查找模块的速度。

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
 

4、生产环境关闭 sourceMap

• sourceMap 本质上是一种映射关系，打包出来的 js 文件中的代码可以映射到代码文件的具体位置,这种映射关系会帮助我们直接找到在源代码中的错误。
• 打包速度减慢，生产文件变大，所以开发环境使用 sourceMap，生产环境则关闭。

5、代码压缩

• UglifyJS: vue-cli 默认使用的压缩代码方式，它使用的是单线程压缩代码，打包时间较慢
• ParallelUglifyPlugin: 开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成

两种方法使用如下：

plugins: [
  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        warnings: false
      }
    },
    sourceMap: true,
    parallel: true
  }),

  new ParallelUglifyPlugin({
    //缓存压缩后的结果，下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回，
    //cacheDir 用于配置缓存存放的目录路径。
    cacheDir: '.cache/',
    sourceMap: true,
    uglifyJS: {
      output: {
        comments: false
      },
      compress: {
        warnings: false
      }
    }
  })
]
 

打包速度和打包后的文件大小啊对比

方法	文件大小	打包速度
不用插件	14.6M	32s
UglifyJsPlugin	12.9M	33s
ParallelUglifyPlugi	7.98M	17s

6、提取公共代码

• 相同资源重复被加载，浪费用户流量，增加服务器成本。
• 每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验。

webpack3 使用 CommonsChunkPlugin 的实现：

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function(module, count) {
      console.log(module.resource, `引用次数${count}`)
      //"有正在处理文件" + "这个文件是 .js 后缀" + "这个文件是在 node_modules 中"
      return module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, './node_modules')) === 0
    }
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    chunks: 'initial',
    minChunks: 2
  })
]
 

webpack4 使用 splitChunks 的实现：

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          priority: 1, //添加权重
          test: /node_modules/, //把这个目录下符合下面几个条件的库抽离出来
          chunks: 'initial', //刚开始就要抽离
          minChunks: 2 //重复2次使用的时候需要抽离出来
        },
        common: {
          //公共的模块
          chunks: 'initial',
          minChunks: 2
        }
      }
    }
  }
}
 

7、CDN 优化

• 随着项目越做越大，依赖的第三方 npm 包越来越多，构建之后的文件也会越来越大。
• 再加上又是单页应用，这就会导致在网速较慢或者服务器带宽有限的情况出现长时间的白屏。

1、将 vue、vue-router、vuex、element-ui 和 axios 这五个库，全部改为通过 CDN 链接获取，在 index.html 里插入 相应链接。

<head>
  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" />
</head>
<body>
  <div id="app"></div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
  <!-- built files will be auto injected -->
</body>
 

2、在 webpack.config.js 配置文件

module.exports = {
 ···
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'Axios':'axios'
    }
  },
 

3、卸载依赖的 npm 包，npm uninstall axios element-ui vue vue-router vuex

4、修改 main.js 文件里之前的引包方式

// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// import VueRouter from 'vue-router'

import App from './App.vue'
import routes from './router'
import utils from './utils/Utils'

Vue.use(ELEMENT)
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'hash', //路由的模式
  routes
})

new Vue({
  router,
  el: '#app',
  render: h => h(App)
})
 

8、使用 HappyPack 多进程解析和处理文件

• 由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的事情需要一件一件的做，不能多件事一起做。
• HappyPack 就能让 Webpack 把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。
• HappyPack 对 file-loader、url-loader 支持的不友好，所以不建议对该 loader 使用。

使用方法如下：

1. HappyPack 插件安装： npm i -D happypack
2. webpack.base.conf.js 文件对 module.rules 进行配置

webpack.base.conf.js：

module: {
  rules: [
    {
      test: /\.js$/,
      use: ['happypack/loader?id=babel'],
      include: [resolve('src'), resolve('test')],
      exclude: path.resolve(__dirname, 'node_modules')
    },
    {
      test: /\.vue$/,
      use: ['happypack/loader?id=vue']
    }
  ]
}
 

3.在生产环境 webpack.prod.conf.js 文件进行配置

webpack.prod.conf.js ：

const HappyPack = require('happypack')
// 构造出共享进程池，在进程池中包含5个子进程
const HappyPackThreadPool = HappyPack.ThreadPool({ size: 5 })
plugins: [
  new HappyPack({
    // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件
    id: 'babel',
    // 如何处理.js文件，用法和Loader配置中一样
    loaders: ['babel-loader?cacheDirectory'],
    threadPool: HappyPackThreadPool
  }),
  new HappyPack({
    id: 'vue', // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件
    loaders: [
      {
        loader: 'vue-loader',
        options: vueLoaderConfig
      }
    ],
    threadPool: HappyPackThreadPool
  })
]
 

总结

1. 比较实用的方法: 按需加载，优化loader配置，关闭生产环境的sourceMap，CDN优化。
2. vue-cli已做的优化： 代码压缩，提取公共代码，再优化空间不大。
3. 根据项目实际需要和自身开发水平选择优化方法，必须避免因为优化产生bug。