深入理解基于vue-cli的webpack打包优化实践及探索

为什么需要优化打包？

Vue.js 是一个非常出色的前端框架，但是在开发的过程中，仍然会出现打包过慢、开发体验跟不上等问题。这些问题是由 webpack 打包产生的，而优化打包就是为了解决这些问题。优化打包的好处不仅仅是快速的编译速度，更使得我们的生产环境下的加载速度加快，提高了用户的体验。

如何进行优化打包？

我们可以通过一些手段改善 webpack 打包的速度和质量。下面我会分享一些具体的优化方法。

1. 按需加载

很多时候，我们的应用都会引入许多不必要的代码，而这些代码也需要被打包并加载。这样子显然会降低应用的性能。因此，我们可以通过按需加载的方式，提高应用的性能。

webpack 4 内置了 import() 作为动态引入模块的方法，它可以让我们在需要的时候再去引入一个文件，而不是在一开始就把所有文件都引入进来。

以 Vue.js 为例，在路由配置的时候，我们可以这样使用：

const Home = () => import('@/components/Home')
const About = () => import('@/components/About')

上述代码并不会在初始化的时候把 Home 组件和 About 组件加载进来，只会在访问相应路由时再去加载，这样可以大大提高应用的性能。

2. 代码分离

在一个应用中，可能会存在可复用或者相似的代码。这些代码如果不分离的话就会被重复打包，导致代码冗余，并且增加了文件的大小。代码分离就是把那些相同的代码单独提出来，并打包成一个单独的文件。

我们可以通过 webpack 内置的 splitChunks 来进行代码分离。将 splitChunks 配置到 optimization 中即可。示例配置如下：

optimization: {
  splitChunks: {
    chunks: 'all',
    name: 'common'
  }
}

上面的配置可以把所有公共的代码提取出来，并打包成一个叫 common.js 的文件。这样，在多个页面或者组件中使用相同的代码时，就可以直接引用 common.js 文件，而不需要把代码重复打包。

示例

示例1：按需加载

在一个 Vue.js 的 SPA 应用中，通常会有一个 home 页面和一个 about 页面。其中，home 页面会引入一个叫 banner 的组件，about 页面也会引入这个组件。

如果我们不按需加载，那么在引入的时候就会把 banner 组件打包在两个页面中，导致页面加载比较缓慢。

这时，我们可以使用按需加载的方式来解决这个问题，只有在访问相应路由时才加载相应的组件。代码如下：

const Home = () => import('@/components/Home')
const About = () => import('@/components/About')
const Banner = () => import('@/components/Banner')

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home, children: [{ path: 'banner', component: Banner }] },
    { path: '/about', component: About }
  ]
})

注意：import() 是异步加载，需要使用 Es6 的 Promise 或者 Webpack 的 import() 语法。

示例2：代码分离

在一个 Vue.js 的应用中，我们可能会在多个组件中使用 lodash 这个库，如果不进行代码分离，那么每个组件都会打包一份 lodash，导致代码冗余并且增加文件的大小。

这时，我们可以使用代码分离来解决这个问题。在 webpack 的配置文件中，我们可以这样配置 splitChunks：

optimization: {
  splitChunks: {
    chunks: 'all',
    name: 'vendor'
  }
}

这样，vendor.js 文件就会包含所有的公共代码，包括 lodash 这个库。多个组件使用 lodash 的时候，只需要引入 vendor.js 文件即可，不需要在每个组件中重复打包这个库的代码。

总结

通过上述的优化方式，我们可以有效地解决打包过慢、文件大小过大等问题，提高我们的应用性能。当然，仅仅是上述优化方式还不够，还需要根据自己的应用场景来选择合适的优化方法，综合起见，不断地优化打包是一个渐进的过程。