打包项目优化:
目录
第二步:在public/index.html文件的头部设置CDN文件:
10node服务器开启gzip配置
1生成打包报告
方法1:通过vue-cli-service build --report命令生成
方法2:通过可视化vue-cli界面查看:
包括各模块体积大小,各资源加载所需时间。
2第三方库使用CDN
方式:通过externals加载外部CDN资源
原因:在未打包前,导入的依赖项默认会放在第一个文件中(js/chunk.......),若在webpack中设置externals节点,则不会放在此文件中,而是当用到的时候会在windows全局对象上找现成的对象进行使用
第一步:在webpack中设置externals节点
chainWebpack: config => {
// 发布模式
config.when(process.env.NODE_ENV === 'production', config => {
config.entry('app').clear().add('./src/main-prod.js')
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
config.plugin('html').tap(args => {
args[0].isProd = true
return args
})
})
第二步:在public/index.html文件的头部设置CDN文件:
3优化ElementUI的打包:
第一步:在main-prod.js中注释掉elementUI按需加载的代码
第二步:在public/index.html的头部中,通过cdn加载element-ui的js和css的样式
4 element-ui按需导入
5路由赖加载
6去console语句
在babel.config.js文件中设置:
// 设置仅发布阶段需要使用babel插件
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
// [['transform-remove-console', { exclude: ['error', 'warn'] }]],
// 发布阶段的插件数组
...prodPlugins,
'@babel/plugin-syntax-dynamic-import'
]
}
7去map文件
在vue.config.js中设置
productionSourceMap: false
8设置不同打包入口:
开发模式入口为:main-dev.js
发布模式入口为:main-prod.js
// 修改webpack配置
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
//去map文件
productionSourceMap: false,
chainWebpack: config => {
// 发布模式
config.when(process.env.NODE_ENV === 'production', config => {
config.entry('app').clear().add('./src/main-prod.js')
})
// 开发模式
config.when(process.env.NODE_ENV === 'development', config => {
config.entry('app').clear().add('./src/main-dev.js')
})
}
}
9 node 创建服务器
1创建node项目,并安装express快速创建node服务器,将vue打包后生成的dist文件托管为静态资源,
10开启Gzip配置
1:下载包 npm i compression -D
2:
webpack:Vue学习之十二(webpack优化打包及发布上线)_David Wu-CSDN博客_webpack打包发布