记录一次webpack 打包优化

记录自己的一次webpack打包优化。项目使用的是vue.cli2.0

这是线上的代码，看了看首页所需要加载的资源所耗时400多ms，

发现了几个问题

1.打包出来的vendors.js ，把第三方库全代码全部打包进去了，导致vendor.js 过大。
2.首页加载，没有使用路由懒加载，把其他路由的文件也加载出来了，完全没必要。

针对这几个问题，来采取相应的措施。

1.使用路由懒加载，加载首页时，只加载需要的组件。路由文件中，对首页需要加载的组件做懒加载。利用 **import(）**语法。

 {
            path: '/gateway',
            component: () =>
                import(
                    /* webpackChunkName: 'gateway' */ '@/pages/gateway/gateway.vue'
                ),
            redirect: '/gateway/developerCenter',
            children: [
                {
                    path: '/gateway/developerCenter',
                    component: () =>
                        import(
                            /* webpackChunkName: 'developerCenter' */ '@/pages/developerCenter/developerCenter.vue'
                        ),
                    redirect: '/gateway/developerCenter/resourceDown',
                    children: [
                        {
                            path: '/gateway/developerCenter/resourceDown',
                            component: () =>
                                import(
                                    /* webpackChunkName: 'resourceDown' */ '@/pages/developerCenter/resourceDown/resourceDown.vue'
                                ),
                        },
 }

可以看到，使用路由懒加载之后，首页加载的时间由原来的400ms变为了现在的100多ms，快了300ms。同时异步加载路由组件的代码，从vendor.js 中分离出来了，分为了 0.xxx.js, 1.xxx.js, 2.xxx.js, 这是因为异步加载的代码webpack会进行代码分割，同时打包出来的文件名，受到output.chunk Filename的影响，chunkFilename默认是 以id为名称的，所以打包出来的是 0， 1， 2。

2. 使用auto-dll-webpack-plugin 大家不懂得可以看看这篇文章， 把第三方文件抽离出来，不打包进vendors.js, 打包时，减少vendors.js 的体积，把第三方文件单独打包出来 ，不放进vendors.js. 好处:

• 项目再次打包的过程中，不需要重复打包第三方代码

• 打包出来的项目体积更小，打包速度更快

• 浏览器再次加载时，直接从缓存读取第三方文件，因为第三方库代码基本不会改动，页面加载速度快

  （PS: 本来打算使用DllPlugin和 DllReferencePlugin来对第三方库代码做分离打包的，做的过程中发现了这个auto-dll-webpack-plugin,发现更方便使用，配置一个插件就可以了。所以转用了这个插件，不得不说，更新的速度真快，但其本质都是以空间换时间。）

const AutoDllPlugin = require('autodll-webpack-plugin')

// ......  省略部分过程

plugins: [
   new AutoDllPlugin({
            inject: true,
            debug: true,
            filename: '[name]_dll.js',
            entry: {
                // 项目中所用的第三方库
                vendor: ['vue', 'vuex', 'vue-router'],
                axios: ['axios'],
                tools1: ['font-awesome', 'form-create'],
                tools2: ['vue-awesome-swiper', 'vue-i18n'],
            },
        }),
]

使用了auto-dll-webpack-plugin 之后，可以明显看到，打包出来的vendor.js 体积小了很多，浏览器加载vendor.js 的速度更快，像vue,vuex 这些库代码都打包进行了vendor.dll.js ，axios等工具库代码也被打包放在额外的文件中axios.dll.js。再次打包时，可以明显发现本地打包的速度更快。浏览器再次加载这些资源时，直接从缓存中读取这些文件

3. 利用externals忽略一些代码的打包，同时使用cdn的方式引入vue, vuex, axios, vueRouter。

   auto-dll-webpack-plugin 的配置里面，两个入口vendor, axios, 里面配置了vue, vuex, vueRouter，axios这些包 我们都可以通过配置 webpack externals，打包过程中忽略vue, vuex, 不进行打包。同时在index.html中配合cdn的方式引入这些库

externals: {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        axios: 'axios',
        // external: key 是包名， value是代码中静态资源引入后全局的名称，比如vuex，源码里面是挂在window.Vuex 上面的，所以这里value要大写
    },

配置完之后，进行打包，就没有vendor.dll.js 和 axios.dll.js,页面中也不需要引入这两个js，同时页面中通过cdn的方式引入了vue, vueRouter, vuex, axios, 使得页面加载速度更好，也可以利用cdn的缓存，提高了网站的访问速度，会提供更高的效率，更低的网络延时

最后对比一下优化之前和优化之后的代码

未优化之前，可以看到整个的大小是1.1mb左右，并且像vue, vuex 这个库代码也在我们的打包的代码里面，这个第三方代码完全可以不和我们的代码打包到一起。

优化之后，整个代码大小为400多kb，并且vue，等库代码没有和我们打包的代码在一起。

以上便是对代码做的一次优化打包，总的来说，优化了以下几点

1. 首页加载的速度更快，由原来的400ms变为100ms，可以减少首页白屏时间。优化用户体验。
2. 代码进一步分割，vue.cli2.0默认的代码分割都分割在一个vendor.js 里面，导致vendor.js 过大，浏览器加载速度慢，使用auto-dll-webpack-plugin, 把第三方库代码分割到额外的js中，同时配合externals+cdn的方式，忽略vue, vuex, vueRouter 等第三方库代码的打包，这样，打包出来的代码体积更少，并且浏览器加载vue, vuex, vueRouter的速度更快，还可以利用cdn的缓存。
3. 路由懒加载，用到该路由组件时，才去加载组件，使用import()语法，webpack还会对代码进行分割，避免了把代码都分割到vendors里面去。减少vendors.js 的体积。

PS： 以上是便是自己对webpack做的一次打包优化，若有不对的地方，欢迎大家指出，也换成大家在评论区交流。