项目优化.自己总结

项目优化分几个点,一般图片我们用.svg后缀,还有使用base64的格式编码.这些都是减少图片的体积.减少http的请求.还有外部导入的包使用CDN的形式.还有路由的懒加载.还有用keep-alive标签去包裹失活组件.

1. 然后我们打包上线的时候去发现问题,再解决问题.比如说打包会发现,不允许出现console.log这样的代码.我们可以用babel-pluging-transform-remove-console插件解决一下.

在babel.config.js里面配置
一下,但是我们最好设置一个发布阶段的空数组,专门去配置发布阶段的插件
但是怎么判断是开发阶段还是发布阶段,就要在ui面板里面点击serve.有一个--mode 的值是development

发布阶段点击输出的话 --mode的值是production

const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}

2. 我们可以生成一个打包报告

vue-cli-service build --report. 就可以生成roport-html帮助分析包的内容

或者直接ui面板查看报告,通过报告去发现问题解决问题

3. 新建vue.config.js修改webpack的默认配置
vue3.0默认隐藏了webPack的配置项.目的是屏蔽项目的配置过程.让程上序员把工作的
重心放到具体功能和业务逻辑

4. 为开发模式和发布模式指定不同的打包入口.

代码:

通过chainWebpack自定义打包入口
实例代码,写到vue.config.js文件里面
mould.export = {
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 ==='delelopment',config=> {
config.entry('app').clear().add('./src.main-dev.js')
})
}
}

我们再到src里面删除main.js.然后建main-prod.js和main-dev.js.把main.js里面的代
码复制过去

5. 还有通过externals加载外部的CDN资源
默认情况下,通过import语法导入的第三方依赖包,最终会被打包合并到同一个文件夹中.
从而打包成功后,单文件体积过大的问题.
externals就是排除某些包,不被打包到这个文件夹里面去.

mould.export = {

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.when(process.env.NODE_ENV ==='delelopment',config=> {
config.entry('app').clear().add('./src.main-dev.js')
})
}
}

然后我们要在public/index.html文件的头部添加这些CDN的资源引用.

在这里引入这样css和js之后,那我们入口文件里面就可以删掉第三方包的样式表.

6. 通过CDN去优化Element-ui的打包

分为两步,在main-prod.js里面注释掉element-ui按需加载的代码

在index.html头部区域,通过外链CDN加载element-ui的js和css.代码如上

7.如果需要首页内容的自定制

<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>

<% if(htmlWebpackPlugin.options.isProd){ %>

<% } %>

module.exports = {

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

})

// 开发模式

config.when(process.env.NODE_ENV === 'development', config => {

config

.entry('app')

.clear()

.add('./src/main-dev.js')

config.plugin('html').tap(args => {

args[0].isProd = false

return args

})

}

8.路由的懒加载

安装@babel/plugin-syntax-dynamic-import包

在babel.config.js配置文件声明该插件

将路由去改为按需加载的形式