项目优化.自己总结

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性能优化小知识总结