项目优化分几个点,一般图片我们用.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('https://www.cnblogs.com/yadi001/p/src.main-prod.js')
   })

    config.when(process.env.NODE_ENV ==='delelopment',config=> {
          config.entry('app').clear().add('https://www.cnblogs.com/yadi001/p/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('https://www.cnblogs.com/yadi001/p/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('https://www.cnblogs.com/yadi001/p/src.main-dev.js')
    })
 }
}

然后我们要在public/index.html文件的头部添加这些CDN的资源引用.

6. 通过CDN去优化Element-ui的打包

分为两步,在main-prod.js里面注释掉element-ui按需加载的代码

在index.html头部区域,通过外链CDN加载element-ui的js和css.代码如上

7.如果需要首页内容的自定制

8.路由的懒加载

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

在babel.config.js配置文件声明该插件

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