# 个性化构建结果 - vue.config.js

在基础的配置上，自定义构建的结果 - 可以使用 vue.config.js 文档地址：https://cli.vuejs.org/zh/config/#vue-config-js

简介两个字段

• PublicPath - 部署应用包时的基本 URL, 这个配置对应的是 webpack 的 PublicPath 属性
  • 默认值为 ‘/’ , Vue CLI 会假设你的应用是被部署在一个域名的根路径上 https://abc.com/
  • 可以设置为子路径 - 如果你的应用被部署在 https://abc.com/sub/ 那么就设置为 ‘/sub’
  • 可以设置为 CDN 路径 - 在我们的应用中，最后静态资源是要全部上传到 CDN 的，（脚手架自动完成），所以这里可以设置为一个 CDN 域名 - ‘https://oss.imooc-lego.com/editor’
  • 还可以设置为相对路径（’’ 或者 ‘./’），这样所有的资源都会被链接为相对路径
• css.loaderOptions 属性
• 向 CSS 相关的 loader 传递选项
• Ant-design-vue 的样式变量：https://www.antdv.com/docs/vue/customize-theme-cn
• https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less
• 添加更多的CSS预处理器：https://cli.vuejs.org/zh/guide/css.html#预处理器
• 特别注意 less 和 less-loader 的版本问题。不要装最新的，建议选用：

    "less": "^3.12.0",
    "less-loader": "^7.1.0",

bundle 打包分析工具

webpack-bundle-analyzer - https://www.npmjs.com/package/webpack-bundle-analyzer

• 可以作为 webpack plugins 使用
• 可以作为 cli 命令行工具使用

特点和分析过程

• 分析 Bundle 由什么模块组成
• 分析什么模块占据了比较大的体积
• 分析是否有什么错误的模块被打包了

自定义 webpack 配置https://cli.vuejs.org/zh/guide/webpack.html#简单的配置方式

根据图表的优化步骤 2.25 M

• 看看有没有什么重复的模块，或者没有用的模块被打包到了最终的代码中
  • 看看 package.json，对比一下是否有应该在 devDeps 的模块，被错误的放置到了 deps 当中
  • 检查是否有重复加载的模块，或者是功能大体相同的模块。
    • 使用** es ** 版本的第三方库，享受 tree-shaking 的红利。 2.18M
  • 检查是否有没有用的模块是否打包到了最终的文件中。 1.95M
    • 使用 webpack ignore plugin https://webpack.js.org/plugins/ignore-plugin/#root
• 按需加载 ant-design-vue 组件库
  • https://2x.antdv.com/docs/vue/introduce-cn/ 1.25M

使用 SplitChunksPlugin 继续优化文件大小

继续风格第三方库的优点

• 充分利用浏览器的缓存
• 浏览器支持平行加载多个文件
  • HTTP1 对同一域名并行加载的个数限制
  • HTTP2 完全突破这个限制
• SplitChunksPlugin 文档地址：https://webpack.docschina.org/plugins/split-chunks-plugin/

使用动态 import 优化路由

• ES2015 关于 动态 import 的文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import#动态import
• webpack 对动态 import 可以完美支持。
• 文档地址：https://webpack.docschina.org/guides/code-splitting/#dynamic-imports
• webpack 使用 Magic Comments 来实现模块的不同操作。
• 文档地址：https://webpack.docschina.org/api/module-methods/#magic-comments
• Vue Router 支持动态 import。
• 文档地址：https://next.router.vuejs.org/guide/advanced/lazy-loading.html

细粒度配置 webpack 选项

• 链式操作： https://cli.vuejs.org/zh/guide/webpack.html#简单的配置方式
• webpack-chain 插件地址：https://github.com/neutrinojs/webpack-chain

Copyright © 2022 @filway