vuecli3.0項目搭建與webpack-bundle-analyzer分析

首先說一下vuecli低版本與cli3.0的項目結構的區別? ?

少了build config 文件夾? 如果需要進行webpack等配置?

需要在根目錄新建? vue.config.js

cli低版本 cli高版本

?

vue.config.js 文件內容? ?本次只記錄? 打包大小分析以及優化包大小

module.exports = {publicPath: './',// 輸出文件目錄outputDir: 'dist',// 靜態資源目錄 (js, css, img, fonts)assetsDir: 'assets',// webpack-dev-server 相關配置devServer: {// 默認打開瀏覽器open: true,// 端口號port: 8080,},// webpack 配置chainWebpack: (config) => {// 第一 增加打包文件大小分析if (process.env.use_analyzer) {config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)}},//webpack配置configureWebpack: config => {//警告 webpack 的性能提示config.performance = {hints: 'warning',//入口起點的最大體積maxEntrypointSize: 50000000,//生成文件的最大體積maxAssetSize: 30000000,//只給出 js 文件的性能提示assetFilter: function (assetFilename) {return assetFilename.endsWith('.js');}},// 打包忽略config.externals = {'vue': 'Vue','vue-router': 'VueRouter','element-ui': 'ELEMENT'}} }

第一 打包分析?webpack-bundle-analyzer?

? 首先 下載依賴? npm intall webpack-bundle-analyzer –save-dev

? 其次? 在vue.config.js文件配置??

? ? chainWebpack: config => {

? ? ? ? config

? ? ? ? ? ? .plugin('webpack-bundle-analyzer')

? ? ? ? ? ? .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)

? ? }

可以再package.json加入啟動的命令

"scripts": {

"analyz": "use_analyzer=true npm run serve"

}

效果圖

?

總結

以上是生活随笔為你收集整理的vue项目 打包文件大小分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。