手把手教你构建vue项目（微信h5以及hybrid混合开发）（七）——项目的优化

最新推荐文章于 2024-01-05 11:09:45 发布

原创

最新推荐文章于 2024-01-05 11:09:45 发布 · 595 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-cli4.0 #vue项目优化

本文介绍了一套H5项目优化方案，包括使用CDN引入外部资源、代码压缩、图片懒加载、代码分割以及移除生产环境console.log，有效提升大型H5项目加载速度。

一般项目比较大的时候，这个时候如果不优化项目，h5项目就会加载很慢。这里提供一些优化技巧，其实一般项目都可以这样做，引入cdn，压缩代码，图片懒加载，splitChunk分割代码，去掉console.log下面代码示例。

1.使用cdn
vue.config.js

const isProduction = process.env.NODE_ENV !== 'development' // 开发和测试环境一样的配置
let devNeedCdn = false // 本地是否需要注入cdn

// 声明cdn的配置
const cdn = {
   
   
    css: ['https://cdn.jsdelivr.net/npm/vant@2.5/lib/index.css'],
    js: [
        'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js',
        'https://cdn.jsdelivr.net/npm/vant@2.5/lib/vant.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
        'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
        // 'https://cdn.bootcss.com/echarts/4.3.0/echarts-en.common.min.js'
    ],
    // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
    externals: {
   
   
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        // echarts: 'echarts',
        vant: 'vant',
    },
}


module.exports = {
   
   
    configureWebpack: config => {
   
   
        if (isProduction || this.devServer) {
   
   
            // 使用externals设置排除项
            config.externals = cdn.externals
        }
    },
 	chainWebpack(config) {
   
   
		 // 生产环境和测试环境注入cdn
        config.plugin('html').tap(args => {
   
   
            if (isProduction || devNeedCdn) args[0].cdn = cdn
            return args
        })
	}   
}