vue项目打包优化

项目中使用CDN加载

将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首页展示效果。

如果是第三方的包，直接引入cdn的地址, 无需打包到 dist 中

开源项目 CDN 加速服务
1 在 index.html 中引入CDN提供的JS文件
2 在 vue.config.js 中添加配置 externals

// vue.config.js

//生产环境标记
const IS_PRODUCTION = process.env.NODE_ENV === 'production'
//配置引用cdn的js、css地址
const cdn = {
    css: [
        'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css'
    ],
    js: [
        'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.2/vue-router.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js',
        'https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js',
        'https://unpkg.com/element-ui@2.13.2/lib/index.js',
        'https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js'
    ]
}
// 配置打包时使用CDN节点（加入externals外部扩展）， 忽略打包的第三方库
// 左面放package.json中的扩展的名称,右面放项目依赖的名称(项目初始化要用的名称)
// 属性名称 vue, 表示遇到 import xxx from 'vue' 这类引入 'vue'的，不去 node_modules 中找，而是去找全局变量 Vue（其他的为VueRouter、Vuex、axios、ELEMENT、echarts，注意全局变量是一个确定的值，不能修改为其他值，修改为其他大小写或者其他值会报错，若有异议可留言）
const externals = {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    'element-ui': 'ELEMENT',
    'echarts': 'echarts'
}
chainWebpack(config) {
    if (process.env.NODE_ENV === 'production') {
        // 需要加速的cdn资源插入到index.html里边
        config.plugin('html').tap(args => {
            args[0].cdn = cdn
            return args
        })
        //视为一个外部库，而不将它打包进来
        config.externals(externals)
     }
 }

使用 webpack中自带的插件 html插件进行配置，在 index.html 中增加判断，是否使用 CDN， htmlWebpackPlugin.options 使用的是vue.config中的config.plugin('html')的插件属性。

<!-- public/index.html -->
 <!-- 使用CDN的CSS文件 -->
<% for (var i in
 htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
 <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
 <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in
 htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
 <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>

异步组件和按需加载

面试: 如何处理 vue 首屏加载过慢的问题!!!

所有的组件, 都打包到同一个文件中

项目小没问题, 一次性将所有的组件都加载完了

但是, 如果项目大了, 首次加载会一次性将所有的组件加载, 就不合适了!!!

需求(组件按需加载):

访问首页, 加载首页组件
访问用户页, 加载用户组件

vue中的异步组件写法

修改 router/index.js 中导入组件的语法

// 使用：
// 异步组件的写法, 将组件定义成函数
const Home = () => import('./components/home/Home')
// 替换：
// import Home from './components/home/Home'

每个组件都打包成单独的文件了, 但是请求次数又太多了, 可以分模块

// 给打包生产的JS文件起名字
const Index = () => import(/* webpackChunkName: 'index' */'./components/Index.vue')

// chunkName相同，将 goods 和 goods-add 两个组件，打包到一起
const Goods = () => import(/* webpackChunkName: 'products' */'./components/goods')
const GoodsAdd = () => import(/* webpackChunkName: 'products' */'./components/goods-add')

vue项目打包优化

项目中使用CDN加载

异步组件 和 按需加载

异步组件和按需加载