vue项目中遇到的优化

最新推荐文章于 2024-05-06 14:27:21 发布

z逍遥

最新推荐文章于 2024-05-06 14:27:21 发布

阅读量294

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/zyq51/article/details/108784156

版权

本文主要探讨了Vue项目中的优化策略，包括webpack的优化手段，如分离第三方库、多进程编译、公共模块提取等。此外，介绍了Vue项目中通过CDN加速加载，以及基础优化措施，如v-if和v-for的合理使用、computed与watch的区分、移除console、改善入口文件和利用CDN减小包体积等。

摘要由CSDN通过智能技术生成

一、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