项目优化.自己总结

项目优化分几个点,一般图片我们用.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配置文件声明该插件

将路由去改为按需加载的形式