项目的优化策略

lf811

于 2021-11-08 11:21:55 发布

阅读量1k

点赞数

分类专栏： vue项目优化文章标签：前端

本文链接：https://blog.csdn.net/lf811/article/details/121203352

版权

vue项目优化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.减少文件体积

可以将一些公用的方法,防抖,节流,时间格式化之类的,放在一个js文件中;在使用的时候,直接在页面引入;或将该js文件在main.js中引入,并注册为全局的方法

const utils={
    方法名(){
        //处理逻辑
    }
}
export default utils

全局工具函数

import utils from './utils'
Vue.prototype.$utils=utils
//使用的时候
$utils.方法名

2.build阶段,移出控制台的信息

在写项目的时候,常常将我们请求的数据进行打印,看看数据是否请求到;但这样的话,在项目发布的时候容易暴露信息,为了将信息进行维护,我们需要在开发环境中将控制台的信息清空

第一种:重写console.log方法(在index.HTML文件中)

console.log()=fucntion(){}

第二种:安装插件 babel-plugin-transform-remove-console

打开项目控制台，点击依赖->开发依赖，输入babel-plugin-transform-remove-console，安装
打开babel.config.js

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins
  ]
}

3.更好的实现前后端交互,建议使用$loading

如果对于element组件库是按需引入的话,若想实现$loading的效果

1.$loading是在封装的请求接口axios拦截器request.js
中使用的;将此方法在main.js中进行全局注册的话
2.有可能获取不到$loading,因为文件的加载顺序的问题,先加载main.js,(由于找不到element.js按需引入中的$loading,所以会出错)
3.element.js文件中
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;

$loading的实现

4.修改webpack的默认配置

根目录下创建vue.config.js文件
根据不同的应用环境,引入不同的文件(创建main-prod.js文件和main-dev.js文件)
vue项目默认情况下,开发模式和发布模式,共用一个打包文件main.js,为了将这两种模式分离,引入不同的js文件

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            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')
        })
    }
}

chainWebpack可以通过链式编程的形式，修改webpack配置
configureWebpack可以通过操作对象的形式，修改webpack配置

5.CDN

CDN服务器,放置的都是一些长时间内不会改变的数据,eg:图片,放在这儿的话,就不需要再在打包好的文件夹中引入了;

打包后的文件中的chunk_vendors.js文件过大,(因为依赖项的第三方包都被打包在该文件中);可以通过externals排除这些包,使其不被打包到该文件中;

1.在vue.config.js文件的发布模式中,写入以下代码

2..将main.js中引入的相关样式文件,删除,在public/index.html文件的头部,添加以下CDN资源引用(引入css文件在上,js文件在下)

3.在config中配置的相关,类似于axios之类的,当浏览器解析到,会在window进行查找,在public/index.html文件中也进行引入下载的插件相关的cdn文件

4.使用CDN减少element-ui占的内存

通过网络资源的加载,实现element-ui的使用,不需要进行按需引入

6.开发,发布环境下,解决首页内容的形式不同

开发环境中使用的是import加载第三方包，而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现 我们可以通过插件的方式来定制首页内容，打开vue.config.js，

在vue.config.js文件中写入

  //使用插件
//发布环境下
            config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = true
                return args
            })
//开发环境下
 config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = false
                return args
            })

根据isProd的值,是否在public的index.html中引入cdn相关js文件

注意:

1.index.HTML文件在打包编译的过程中,都会被使用,可能会出现资源被重复引入的情况

2.根据生产环境还是开发环境(public的index.html中的htmlWebpackPlugin),判断是否引入某些文件

3.确保cdn中引入的文件的版本是否和package.json中的是否一致,拿着cdn引入的文件的网址去浏览器上验证是否能打开

7.路由懒加载的方式

打包后的dist文件中的chunk-vendors.js 是核心文件可以通过,减小打包后的app.js文件的大小,实现性能优化(因为我们写的页面都在app.js中,通过路由懒加载,只加载请求的页面(当路由被访问时才加载对应的路由文件),减少性能消耗)

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

在babel.config.js中声明该插件

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins,
    //配置路由懒加载插件
    "@babel/plugin-syntax-dynamic-import"
  ]
}