vue3 yarn方式打包项目 vue的打包

文章目录

• 说明
• 移除console
• vue.congfig.js文件

• 基本介绍
• webpack

• vue.config.js 文件种webpack配置节点
• 通过chainWebpack自定义打包入口

• 优化依赖项过大

• 原因
• 通过externals加载外部CDN资源

• 路由懒加载

说明

使用的是@vue/cli 4.5.12 和@vue2.6.11

移除console

1.安装 babel-plugin-transform-remove-console 开发依赖项
2.在babel.config.js文件的plugins节点下增加’transform-remove-console’

//babel.config.js文件
module.exports = {
 ...
  plugins: [
   ...
    'transform-remove-console'
  ]
}

vue.congfig.js文件

基本介绍

1.简介：@vue-cli3.0 以后生成的项目，默认隐藏了vue.config.js文件，我们需要自己在根目录下创建vue.config.js文件，这个文件可以对项目的打包发布过程做自定义的配置
2.vue.config.js文件基本代码

module.exports = {
  
}

webpack

vue.config.js 文件种webpack配置节点

1.vue.config.js导出的配置对象中，新增configWebpack和chainWebpack节点，来自定义webpack的打包配置，这个种的作用是相同的，配置方式不同

• configWebpack–通过操作对象的形式

//vue.config.js 文件
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

• chainWebpack–通过链式编程的形式

//vue.config.js 文件
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
}

通过chainWebpack自定义打包入口

// 需要新建  main-prod文件（./src/main-prod.js）和main-dev文件（./src/main-dev.js） ，然后配置开发模式和生成模式不同的打包入口
module.exports = {
  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 === 'development', config => {
      // 开发环境下
      config
        .entry('app')
        .clear() // 清空默认打包入口
        .add('./src/main-dev.js') // 添加新的打包入口
    })
  }
}

优化依赖项过大

原因

默认情况下，通过import语法导入的第三方依赖包（导入的样式表也会打包），最终会被打包到同一个文件中，单文件体积过大问题

通过externals加载外部CDN资源

凡是声明在externals中的import导入第三方依赖包，都不会打包，而是会在window全局查找import的对象,同时需要添加CDN资源
1.在vue.config.js文件中设置externals(在生成环境中设置)

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',
        echarts: 'echarts',
        nprogress: 'nprogress',
        'vue-quill-editor': 'VueQuillEditor'
      })
    })

    config.when(process.env.NODE_ENV === 'development', config => {
      // 开发环境下
      config
        .entry('app')
        .clear() // 清空默认打包入口
        .add('./src/main-dev.js') // 添加新的打包入口
    })
  }
}

2.删除main.js中导入的nprogress、element-ui、VueQuillEditor样式表，并在html文件中通过link标签引入

<!-- 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" />

3.在html中通过script引入响应的js文件

<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>

4.element-ui按需加载的CDN优化

路由懒加载