本文主要探讨了Vue项目中的优化策略，包括webpack的优化手段，如分离第三方库、多进程编译、公共模块提取等。此外，介绍了Vue项目中通过CDN加速加载，以及基础优化措施，如v-if和v-for的合理使用、computed与watch的区分、移除console、改善入口文件和利用CDN减小包体积等。
一、webpack 常见的优化手段;
首先webpack 是一个资源处理工具,它的出现节省了我们的人力和时间; 可以对资源打包,解析,区分开发模式等等…
其中常见的优化手段:
-
分离第三方库(依赖),比如引入
dll -
引入多进程编译,比如
happypack -
提取公共的依赖模块,比如
commonChunkPlugin -
资源混淆和压缩:比如
UglifyJS -
分离样式这些,减小
bundle chunk的大小,比如ExtractTextPlugin -
GZIP 压缩,在打包的时候对资源对齐压缩,只要部署的服务器能解析即可…减少请求的大小
-
还有按需加载这些,一般主流的框架都有对应的模块懒加载方式.
-
至于
tree shaking目前webpack3/4已经默认集成
二、Vue项目中的优化
cdn
其作用是：当我们加载页面时，需要将我们所需要的一些依赖加载到当前会话中然后再开始执行，如果我们首屏，模块比较多是，需要等待的时间会比较长，而且。浏览器内存最多执行四十个进程，需要等到加载完前面的才能执行后面的代码，如果我们采用cdn的方式来引入一些第三方资源，就可以缓解我们服务器的压力，原理是将我们的压力分给其他服务器点。下面是代码的具体实现：
（1）首先是引入资源，这里用的是bootstrap提供的资源， 你可以登录官网进入查看哦，网址：http://www.bootcdn.cn/
vue在最外层的index.js文件中引入，引入如下
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>12
然后项目中需要改的地方是bulid文件夹下面的webpack.base.conf.js文件，改的地方为
module.exports = {
entry: {
app: './src/main.js'
},
externals:{
'BMap': 'BMap',
'vue': 'Vue',
'vue-router': 'VueRouter'
},123456789
这里需要将vue和vue-router公开出去，供全局使用，这里小写的vue和vue-router是我们引入资源时对应的名字，冒号后面大写的名字是我们自己定义的名字和项目中要使用的名字，当然这两个名字可以一样，接下来就是将我们项目中引用对应资源的地方将原先的引入方式去掉，也就是我们原先用import引入的，例如main.js和router文件夹下的index.js修改：
// import Vue from 'vue'1
// import Vue from 'vue'
// import VueRouter from 'vue-router'12
注意将router文件夹下的index.js修改
export default new VueRouter({
// modes: 'history',
routes: [
{
path: '/',
redirect: '/main/home'
},1234567
这里需要说明的是上面修改的可能不是必要的，这里只为记录一下知识，不喜勿喷
Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分，
我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、
Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，
使项目具有更高效的性能、更好的用户体验。
1234
三、基础优化（代码以及编码规范）
1、v-if 和 v-for区分使用场景
- v-if=false时不渲染DOM，v-show会预渲染DOM，注意区分使用
- v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
- v-for 遍历必须为 item 添加 key
- 在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。
- v-for 遍历避免同时使用 v-if
- v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性
2、computed 和 watch 区分使用场景
- computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
- watch：更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作
运用场景：
1. 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，
因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
2.当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，
使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，
限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。
这些都是计算属性无法做到的。
1234567
3、在使用 npm run build 打包时 移除console
随着项目功能的不断完善 代码的累积 项目中的庞大代码数量
造成我们打包时的长时间等待 尤其是我们在开发阶段留下的过多的测试代码
例如最常见不过的console 消耗我们的时间 并且占有一定的内存
123
(1)、使用 babel中 的一个插件，因为webpack 打包时会使用 babel 进行代码降级，所以babel 插件可以在打包过程中将 console 移除
安装插件
npm install babel-plugin-transform-remove-console --save-dev
123
(2)、配置babel.config文件
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']
}
1234567891011
这样配置后 再次打包 包中就没有console了
问题：当运行npm run serve时 也会删除console 但是开发阶段我们需要
改善babel.config文件：
现在 只有在打包时会删除console
3、改善入口文件
项目中的默认入口文件时main.js文件 不管是打包 还是开发阶段使用的都是这一文件
在卡法阶段我们可能调用一端口返回假数据 为调试我们的代码 但是在上线后我们需要用正式接口
可能不止一个
但是我们左右手动更改较为麻烦 且容易出错
1234
比如：
(1).创建两个入口文件：
- 一个用于开发环境的打包 dev_env.js
- 一个用于项目上线的打包 prod_env.js
(2)、配置打包的入口文件
module.exports={
chainWebpack:config=>{
config.when(process.env.NODE_ENV === 'production',config=>{
config.entry('app').clear().add('./src/prod_env.js')
})
config.when(process.env.NODE_ENV === 'development',config=>{
config.entry('app').clear().add('./src/dev_env.js')
})
}
}
1234567891011
开发时，使用 npm run serve 命令，NODE_ENV 的值就是 developmnent ,所以会将 dev.env.js 作为入口文件
部署时，使用 npm run build 命令，NODE_ENV 的值就是 production，所以会将 prod_evn.js 作为入口文件
123
4、改善打包时包的体积大小
通常情况下 项目中通过import方式引入的包 会将整个包下载到客户端 这可能会导致程序的加载速度非常慢
1
使用CDN
将线上环境中用到一些依赖，比如 vue、vueRouter 、axios 等，
使用 cdn 节点的方式引用，而不是打到包里去
此项目中 将项目上线后仍然需要用到的一些依赖包从prod_evn.js文件中删然后在 public/index.html 中使用 cdn 节点引用
1234
首先修改我们上线时的入口文件
然后在 public/index.html 中加入如下引用
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.core.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.bubble.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
1234567891011121314
最后在 vue.config.js 中添加配置
打包后 包的体积明显减小
扫一扫
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
