html5怎么改为vue_Vue.js 项目打包优化实践

首先上结果：

1. 把常用的 Vue，router，vuex，axios 的 runtime 包拆分了出来，改为 cdn；
2. 另外就是对于自己编写的业务代码进行分包，根据路由进行懒加载，可以较好的提高首屏加载速度。
3. 添加了全局 loading 来提高体验。

优化前，可以看出包含了不少的runtime包

经过优化体积大幅减小

不出意外core-js也可以改成CDN

配合静态资源的CDN加速，目前首页的速度大概是700ms，除了图片外加载的速度大概是200ms左右

abandon.work​abandon.work

CDN 优化

CDN 优化是在 webpack 中实现的，主要分为环境切换，webpack 打包技巧和 html-webpack-plugin配置三个部分。

这部分的代码可以点击这个链接

环境切换

通过process.env.NODE_ENV来切换环境，因为在 dev 环境的时候，最好还是使用本地包，方便 debug 等，在生产环境的时候才需要添加 CDN.

本项目的vue.config.js中就是这样安排的，这样就可以在不同环境对 webpack 进行配置，类似于vue-cli2的配置类型：

# cli 2
webpack.dev.js
webpack.prod.js

本项目中;

if (process.env.NODE_ENV === 'production') {
    webpackConfig['chainWebpack'] = config => {
        config.plugin('html').tap(args => {
            args[0].cdn = cdn;
            return args;
        });
    };
    webpackConfig['configureWebpack'] = config => {
        config['externals'] = {
            vue: 'Vue',
            vuex: 'Vuex',
            'vue-router': 'VueRouter',
            axios: 'axios',
        };
        config['plugins'].push(new BundleAnalyzerPlugin());
    };
}

module.exports = webpackConfig;

具体操作涉及vue/cli3+的配置，具体可以看这里;
对于configureWebpack， 有配置式和函数式，当使用函数式的时候，添加插件的方法可以看上面的片段，这是官方文档里面没有的。

打包技巧

那么该怎么设置 cdn 呢？

这里需要两个 webpack 的配置项：

1. webpack.externals
2. webpack.plugins.html-webpack-plugin
   具体也可以看代码，主要的思路就是在区分环境的基础上，在生产环境将需要 cdn 的包放在webpack.externals里面：

webpackConfig['configureWebpack'] = config => {
    config['externals'] = {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        axios: 'axios',
    };
};

接着就是操作 plugin，这里选择链式操作，将需要填入的 cdn 连接的内容传给index.html模板：

let cdn = {
    js: [
        // 可以写成动态版本号
        '//cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js',
        '//cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        '//cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
        '//cdn.bootcss.com/axios/0.19.0/axios.min.js',
    ],
};
webpackConfig['chainWebpack'] = config => {
    config.plugin('html').tap(args => {
        args[0].cdn = cdn;
        return args;
    });
};

html-plugin 配置

上述的配置完成之后，需要在public/inedx.html中修改一下：

<div id="app"></div>
<% if(process.env.NODE_ENV==='production'){htmlWebpackPlugin.options.cdn.js.forEach(function(item){ if(item){ %>
<script type="text/javascript" src="<%= item %>"></script>
<% }})} %>
<!-- built files will be auto injected -->

这个的目的就是当是生产环境的时候，遍历生成 CDN 的元素。这是一个模板语法，可以看看html-webpack-plugin

参考文章

1. webpack 使用 HtmlWebpackPlugin 进行 cdn 配置
2. vue 打包优化
3. 在 vue-cli 3.0 中根据不同环境动态注入 CDN
4. webpack-cdn-plugin
5. webpack4 配置的最佳实践

路由懒加载优化

这里主要是根据官方文档的实践：
结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

// src/router/index.js
// 路由懒加载 博客分块
const Blog = () => import(/* webpackChunkName: "group-blog" */ '../views/Blog/Blog.vue');
const ContentPage = () => import(/* webpackChunkName: "group-blog" */ '../views/Blog/ContentPage.vue');

loading 插件

为了美化加载的过程，自定义一个Loading插件，主要参考了这些文章

选择了一个蛮炫酷的动效

功能：

• 单例模式
• 可以在axios拦截器中使用

写在最后

希望大家可以多多关注我的abandon.work，一个nest.js+mongoDB+Vue.js的小站。