一、新建项目
使用 vue-cli3
构建一个初始的Vue项目:Cli3 官方文档
因为使用了cli3,很多目录结构不见了,而相关配置是放在
vue.config.js
里面的,因此在根目录,新建一个vue.config.js
module.exports = {}
二、正式优化
1、将 productionSourceMap 设为 false
(1) 在vue.config.js
中module.exports
写入:
module.exports = {
productionSourceMap: false
}
2、图片压缩
vue正常打包之后一些图片文件很大,使打包体积很大,通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积
(1) 先安装依赖:cnpm install image-webpack-loader --save-dev
(2) 在vue.config.js
中module.exports
写入:
module.exports = {
productionSourceMap: false,
chainWebpack: config => {
// ============压缩图片 start============
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
.end()
// ============压缩图片 end============
}
}
3、cdn配置(可选)
(1) 在vue.config.js
最上边写入:
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'
// 本地环境是否需要使用cdn
const devNeedCdn = false
// cdn链接
const cdn = {
// cdn:模块名称和模块作用域命名(对应window里面挂载的变量名称)
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter'
},
// cdn的css链接
css: [],
// cdn的js链接
js: [
'https://cdn.staticfile.org/vue/2.6.10/vue.min.js',
'https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js',
'https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js'
]
}
(2) 在vue.config.js
module.exports
chainWebpack
中写入:
// ============注入cdn start============
config.plugin('html').tap(args => {
// 生产环境或本地需要cdn时,才注入cdn
if (isProduction || devNeedCdn) args[0].cdn = cdn
return args
})
// ============注入cdn start============
(3) 在vue.config.js
module.exports
configureWebpack
中写入