项目优化.自己总结
Posted yadi001
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了项目优化.自己总结相关的知识,希望对你有一定的参考价值。
项目优化分几个点,一般图片我们用.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的资源引用.
<!-- nprogress 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富文本编辑器 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
<!-- element-ui 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
在这里引入这样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){ %>
<!-- nprogress 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富文本编辑器 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
<!-- element-ui 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
<% } %>
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配置文件声明该插件
将路由去改为按需加载的形式
以上是关于项目优化.自己总结的主要内容,如果未能解决你的问题,请参考以下文章
YOLOv3 训练自己的数据附优化与问题总结
App瘦身性能优化总结
java常用重构优化总结--自己亲身体验
Android构建速度优化总结分享
Android构建速度优化总结分享
JavaScript性能优化小知识总结