VUE项目优化

一、生成打包报告

1. 在vue控制台生成打包报告

    1.1. 点击“任务”=>“build”=>“运行”

    1.2. 运行完毕之后点击右侧“分析”，“控制台”面板查看报告

2. 打包时自动清除console

https://blog.csdn.net/zeroyulong/article/details/97626980

 

二、webpack 配置项

默认情况下，vue-cli 生成的项目，隐藏了webpack 配置项

如果我们需要配置 webpack，需要通过 vue.config.js 来配置 ( 官方配置具体配置参考 https://cli.vuejs.org/zh/guide/webpack.html)

让 打包模式 和 开发模式 2个独立的main.js

  1. 在项目根目录中创建 vue.config.js 文件 

  2. 新建2个main.js，把他复制过去： 

      打包命名为 main-prod.js 

      开发命名为 main-dev.js

  3. 通过 chainWebpack 自定义打包入口 ( chainWebpack可以通过链式编程的形式，修改webpack配置 )

module.exports = {
  // 修改webpack配置,让 打包模式 和 开发模式 2个独立的main.js
  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')
    })
  }
}

 

三、配置打包的项目用第三方 CDN 加载包

1. 通过 externals 加载外部 CDN 资源

  默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。

  为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在 externals 中的第三方依赖包，都不会被打包。

2. 在 vue.config.js 中配置

    config.set('externals', {

      // 这里写的是需要全局注册的依赖

      'vue': 'Vue',

      依赖名称: 注册名称,

    })

  3. 删除 main-prod.js 对应的样式导入语句（element-ui 比较特殊，他不需要全局注册，删掉导入即可）

  4. 在 public/index.html 的头部添加对应的 CDN 资源引用

 

四、不同的环境下，首页文件设置不同的配置，我们可以通过配置 isProd 的值的方式进行定制

  1. 在 vue.config.js 中配置 isProd 的值

    （ isProd 值： true 为打包模式 false 为开发模式 ）

      打包模式

        config.plugin('html').tap(args => {

          args[0].isProd = true

          return args

        })

      开发模式

        config.plugin('html').tap(args => {

          args[0].isProd = false

          return args

        })

  2. 在 public/index.html 首页中，可以根据 isProd 的值，来决定如何渲染页面结构：

    2.1 按需渲染页面的标题 (开发模式前面添加 'dev -'')

      

    2.2 按需加载外部的 CDN 资源 (打包模式才渲染出cdn包)

      <% if(htmlWebpackPlugin.options.isProd) { %>

        

      <% } %>

 

五、路由懒加载

  当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成

  不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

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

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

  3. 将路由改为按需加载的形式，示例代码如下：

    语法：  const 路由名称 = () => import(/* webpackChunkName: "分组名称" */ '路径')， 分组名称相同的会打包到同一个组件

      const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

      const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')

  4. 关于路由懒加载的详细文档，可参考如下链接： https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

 

vue.config.js 完整配置

 

module.exports = {
  // 修改webpack配置,让 打包模式 和 开发模式 2个独立的main.js
  chainWebpack: config => {

    // 打包模式
    config.when(process.env.NODE_ENV === 'production', config => {

      // entry找到默认的打包入口，调用clear则是删除默认的打包入口
      // add添加新的打包入口
      config.entry('app').clear().add('./src/main-prod.js')

      // 配置需要使用 CDN 资源加载的第三方依赖包     

     config.set('externals', {
        // 这里写的是需要全局注册的依赖
        'vue': 'Vue',
        依赖名称: 注册名称,
      })

      // 配置 isProd 的值 true 为打包模式
      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')

      // 配置 isProd 的值 false 为开发模式
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
      
    })
  }
}