1.下载webpack打包分析插件
npm install webpack-bundle-analyzer --save-dev2.package.json中，scripts->build 添加--report
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build --report" },3.创建vue.config.js文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { configureWebpack: { plugins: [ new BundleAnalyzerPlugin() ] } }运行npm run build后，可以查看打包文件的大小
4.如果插件体积过大，configureWebpack中添加externals属性，用cdn替换；打包不包含externals中的内容
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { publicPath:'./', configureWebpack: { externals:{ 'vue':'Vue', 'element-ui':'ELEMENT' }, plugins: [ new BundleAnalyzerPlugin() ] } }说明：externals中是key:value的形式；
key是文件引入的名称，value可以从cdn中的代码找；（从cdn找到链接，浏览器打开）
5.把externals中的插件用cdn替换；搜索bootcdn找到对应的链接
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css" rel="stylesheet"> </head> <body> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js"></script> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>P.S. script要写在body中，否则会报错：Vue is not defined,
运行npm run build? 打开/dist/index.html，运行，有静态资源找不到的错误，
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { publicPath:'./', configureWebpack: { externals:{ 'vue':'Vue', 'element-ui':'ELEMENT' }, plugins: [ new BundleAnalyzerPlugin() ] } }在 vue.config.js中添加publicPath属性即可；
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #Vue #webpack打包优化 #install #添加report #quotscriptsquot
