一、生成打包报告
1、通过命令生成：使用vue-cli-service build --report命令，可以生成一份名为report.html的打包报告，这份报告将详细展示项目中存在的问题和打包的具体情况。
2、通过可视化控制面板查看：在vue-cli3以上版本中，可以通过vue ui进入可视化控制面板，直观地查看项目存在的问题与详细情况，控制台和分析面板会显示项目中的问题，仪表盘则展示每个包占用的内存。
二、修改默认配置
vue-cli3隐藏了所有的webpack配置项，因此需要在vue.config.js文件中对项目打包发布进行自定义配置，常用配置如下：
module.exports = {
publicPath: "/", // 部署应用包时的基本URL
outputDir: "dist", // npm run build生成的文件夹，默认是dist
assetsDir: "static", // 在kaixin文件夹下生成static目录存放js,img,css等静态资源
indexPath: "index.html", // 生成的单文件名
devServer: {
host: "127.0.0.1", // 配置主机地址
port: process.env.NODE_ENV == 'production' ? 3000 : 8888, // 配置运行的端口
proxy: { // 配置多个跨域代理
'/api': {
target: 'http://localhost:3030/api',
ws: true, // 跨域地址是https协议！
changeOrigin: true,
pathWrite: {
"^/api": "" // 将 '/api' 替换成 ''
}
}
},
}
} 三、指定打包入口
默认情况下，Vue的开发模式和生产模式共用一个打包入口文件（main.js），为了分离两者，可以指定两种模式的打包入口文件：
开发模式：src/main-dev.js
生产模式：src/main-prod.js
四、通过externals加载外部CDN资源
默认情况下，通过import引入的三方依赖包最终会一并打包到文件中，导致项目体积过大，可以通过webpack的externals节点来配置并加载外部的CDN资源，避免将其打包，凡是在externals中声明的三方依赖包都不会被打包。
module.exports = {
configureWebpack: {
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
// 添加其他需要通过CDN加载的库
}
}
} 需要在public/index.html文件头部添加相应的CDN资源引用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue Project</title> <!-引入Vue和Vue Router的CDN链接 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js"></script> </head> <body> <div id="app"></div> <!-built files will be auto injected --> </body> </html>
五、优化组件库的打包
开发模式中，虽然已经对组件库使用了按需加载的模式，但打包后仍可能产生体积较大的文件，同样，可以采用CDN加载组件库的js和css文件，进一步减小项目体积。
可以根据不同的环境来定制首页内容，通过插件来进行配置，参考如下：在public/index.html中根据isProd的值来决定如何渲染页面结构，包括指定标题在不同模式下显示以及资源加载判断等。
七、路由懒加载
打包项目后，如果JS文件太大，会影响页面打开加载速度，需要把JS文件分割成多个代码块，然后当路由访问时再加载相对应的组件，常用的有三种方式：
1、vue异步组件
2、es提案的import()
3、webpack的require.ensure()
这里推荐使用es提案的import()，首先需要安装@babel/plugin-syntax-dynamic-import包，并在babel.config.js配置文件中声明该插件，然后将路由改为按需加载形式，通过webpackChunkName将组件分组，相同组的组件将被打包到同一个JS文件中。
八、常见问题与解答
1、如何将Vue打包后的文件以CDN形式引入网页？
回答：要将Vue打包后的文件以CDN形式引入网页，首先需要在你的网页代码中引入CDN链接，你可以在head标签内添加一个script标签，并将CDN链接作为其src属性值。<script src="https://cdn.jsdelivr.net/npm/vue"></script>，这样，你就可以在你的网页中使用Vue了，通过CDN引入的Vue文件，可以从CDN服务器加载，提供更快的加载速度和更好的缓存效果。
2、为什么使用CDN引入Vue打包后的文件？
回答：使用CDN引入Vue打包后的文件有以下几个好处：加速网页加载速度（CDN可以将Vue打包后的文件缓存在全球各地的服务器上，当用户访问你的网页时，可以从离用户最近的服务器上加载Vue文件）；减轻服务器负载（由于Vue文件可以通过CDN加载，服务器的负载会减轻）。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1625203.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复