webpack与vue有关配置

1 打包分析插件-webpack-bundle-analyzer

安装

npm i webpack-bundle-analyzer -D

配置

在对应的webpack配置文件(webpack.prod.conf.js)中添加此插件

if (config.build.bundleAnalyzerReport) {const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginwebpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

运行

npm run build

2 cdn引入部分第三方包

根据BundleAnalyzerPlugin插件分析，我们可以选择一些npm包进行cdn引入来减小打包体积从而提升加载速度

webpack配置

在对应的webpack配置文件(webpack.base.conf.js)的module.exports 中的externals添加要忽略的包
例如：

module.exports = {externals: {'BMap': 'BMap','vue': 'Vue','vue-router': 'VueRouter','axios': 'axios','vant': 'vant','mockjs': 'mockjs','vue-awesome-swiper':'VueAwesomeSwiper'},
}
//key值为npm包名,value值为cdn的js文件中export的名称（需要阅读js文件获得**这个一定要注意）
//有时候会报错，是因为cdn引入的包有依赖关系，比如vue-router必须依赖vue，所以要先加载vue才可以

index.html引入CDN

在index.html文件的head中引入有关js文件,不影响进度的js或css文件可以放入body中，不阻塞html展示

vue与js文件修改

1. import有关CDN代码需要注释,例如vueRouter: // import Router from “vue-router”;
2. 引入代码需要修改，例如vueRouter:const Router=VueRouter

注意：不同包要修改的方式不同，需要研究后再修改，例如vant，vue.use(vant.button)等

3路由懒加载

修改router文件中的引入方式

const  noticeDetail =()=>import("../pages/home/noticeDetail.vue");
export default new Router({mode: "history",// base: "/home/",base: process.env.BASE_URL,routes: [{name: "noticeDetail",component: noticeDetail,path: "/home/noticeDetail"},]
});

webpack配置需要注意的点

optimization的splitChunks配置

一定要注意splitChunks.chunks当前配置了什么，如果需要懒加载不配置splitChunks.chunks即可
此处可将一些较大的共用的包单独分离出来

 optimization: {splitChunks: {// chunks: 'all',// maxInitialRequests:4,cacheGroups: {public: {chunks: 'initial',name: 'vue-public-componentjs',test: /[\\/]src[\\/]_?components(.*)/,enforce: true,priority: 20},vendor: {chunks: 'initial',test: /node_modules/,name: 'vendor', // 使用 vendor 入口作为公共部分// enforce: true,priority: 10},manifest: {name: 'manifest',minChunks: Infinity}}}}

html-webpack-plugin插件

安装(注意版本,本项目中^3.2.0)

npm i html-webpack-plugin

此处有chunks与excludeChunks需要注意，chunks如果配置了，路由懒加载将会失效，所以不宜配置chunks

mini-css-extract-plugin插件

安装

npm i mini-css-extract-plugin

将js中的css文件分离出来

 plugins: [new MiniCssExtractPlugin({filename: utils.assetsPath('css/[name].[contenthash].css'),// allChunks: true,}),]

4 gzip压缩

webpack

compression-webpack-plugin

参考
用于生成gz包

if (config.build.productionGzip) {const CompressionWebpackPlugin = require('compression-webpack-plugin')webpackConfig.plugins.push(new CompressionWebpackPlugin({filename:'[path][base].gz[query]',algorithm: 'gzip',test: new RegExp(/\.(js|css|json|html)(\?.*)?$/i),threshold: 102400,minRatio: 0.8}))
}

服务端（Nginx等）

需要开启gzip

mino CONSOLE

如果使用了mino需要开启压缩，配置详解

5 加载中的提示

inde.html页面

	
加载中...

至此，原本需要7-8秒才可以加载出来的页面，只需要0-1秒就可以加载出来（此次研究断断续续有两周的时间）

tips:诚然，项目代码中也有很多细节需要优化的地方，不同的项目需要进行不同的优化。不在此赘述