项目版本基于@vue/cli5.0.4和webpack@5.73.0vue-cli5版本内置了webpack5，内置了很多配置，在也就是说，Basic打包不需要在vue.config.js中配置，大大简化了配置过程。因为主要是为了项目的优化，所以创建过程会比较简短。以下是优化的具体细节。项目初始化安装vue-clinpminstall-g@vue/cli创建项目使用vuecreatexx创建项目，可以根据自己的项目选择；初始化项目完成后，可以看到项目的目录结构中已经存在vue.config。.js文件。publicPath配置打包后的路径。需要注意的一点是，当路由处于历史模式时，路径需要设置为绝对路径，即/而不是./。同时nginx需要配置try_files$uri$uri//index.html；module.exports=defineConfig({publicPath:process.env.NODE_ENV==='production'?'/':'/',})outputDir配置包文件存放目录。module.exports=defineConfig({outputDir:'dist',})productionSourceMap生产环境是否使用sourcemap来定位错误源码。（不推荐使用，会影响打包速度，人家会看到自己的代码）module.exports=defineConfig({outputDir:'dist',})devServer配置api和跨域端口等设置。module.exports=defineConfig({devServer:{port:8887,hot:true,compress:true,//是否开启压缩gzipproxy:{'/api':{target:'http://www.galaxychips.com',changeOrigin:true,pathRewrite:{'^/api':''}}}},})css优化创建项目时选择了sass，打包时会自动转为基础css，文件将独立分离。所以这里我只介绍了一个全局变量文件。module.exports=defineConfig({css:{loaderOptions:{scss:{additionalData:'@import"@/assets/scss/variables.scss";'}}},})js优化生产中的内置插件环境已处理缩小并使用babel转译代码。CDN加速将公共图书馆改为CDN导入方式，加快访问速度。注入HTML的插件不需要安装，已经内置了。externals和cdn常量取决于你自己的项目。（代码会贴在文末）module.exports=defineConfig({chainWebpack:config=>{if(process.env.NODE_ENV==='production'){config.externals(externals)//通过html-webpack-pluginwillInjectcdnintoindex.htmlconfig.plugin('html').tap(args=>{args[0].cdn=cdnreturnargs})}}})public/index.html需要写注入代码。
<%for(variinhtmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css){%>"><%}%><%for(variinhtmlWebpackPlugin.options.cdn&&am;htmlWebpackPlugin.options.cdn.js){%><%}%>>/body>注意：我使用的ui框架是vuetify。如果使用cdn导入，则不需要导入样式，否则打包时会报错。代码分割lru-cache是项目中的一个额外插件，提取为一个单独的chunk。配置.optimization.splitChunks({cacheGroups:{styles:{name:'styles',test:/\.(s?css|less|sass)$/,chunks:'all',priority:10},common:{name:'chunk-common',chunks:'all',minChunks:2,//拆分前必须共享一个模块的最小块数。maxInitialRequests:5,//加载打包好的入口文件时，可以同时加载的js文件（包括入口文件）的个数minSize:0,//生成的chunk的最小大小（≈20kb）优先级:1,//优化会优先使用优先级更高的缓存组reuseExistingChunk:true//如果当前块包含从主包中分离出来的模块，它将被重用而不是生成新模块},vendors:{name:'chunk-vendors',test:/[\\/]node_modules[\\/]/,chunks:'all',优先级:2,reuseExistingChunk:true},lrucache:{name:'chunk-lrucache',test:/[\\/]node_modules[\\/]_?lru-cache(.*)/,chunks:'all',priority:3,reuseExistingChunk:true}}})gzipcompression运行npminstallcompression-webpack-plugin-D安装压缩插件。config.plugin('CompressionPlugin').use('compression-webpack-plugin',[{filename:'[path][base].gz',algorithm:'gzip',test:/\.js$|\.css$|\.html$/,threshold:10240,//只处理大于这个值的资源。以字节为单位计算minRatio:0.8//只有压缩比小于这个值的资源才会被处理}])整个配置细节如下const{defineConfig}=require('@vue/cli-service')constpath=require('path')//路径处理方法functionresolve(dir){returnpath.join(__dirname,dir)}constexternals=[{vue:'Vue'},{'vue-router':'VueRouter'},{axios:'axios'},{vuetify:'Vuetify'},{md5:'MD5'},{qs:'Qs'}]constcdn={css:[],js:['https://cdn。jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js','https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js','https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js','https://cdn.jsdelivr.net/npm/vuetify@2.6.0/dist/vuetify.min.js','https://cdn.jsdelivr.net/npm/md5@2.3.0/dist/md5.min.js','https://cdn.jsdelivr.net/npm/qs@6.11.0/dist/qs.min.js']}module.exports=defineConfig({publicPath:process.env.NODE_ENV==='production'?'/':'/',outputDir:'dist',productionSourceMap:false,lintOnSave:process.env.NODE_ENV!=='production',devServer:{port:8887,hot:true,compress:true,//是否启动压缩gzipproxy:{'/api':{target:'http://www.xxxx.com',changeOrigin:true,pathRewrite:{'^/api':''}}}},css:{loaderOptions:{scss:{additionalData:'@import"@/assets/scss/variables.scss";'}}},configureWebpack:{resolve:{extensions:['.vue','.js','.json','scss','css'],别名：{'@':resolve('src')},模块:[resolve('src'),'node_modules']},模块:{},插件:[]},chainWebpack:config=>{if(process.env.NODE_ENV==='production'){config.externals(externals)//通过html-webpack-plugin将cdn注入index.html之中config.plugin('html').tap(args=>{args[0].cdn=cdnreturnargs})config.plugin('CompressionPlugin').use('compression-webpack-plugin',[{filename:'[path][base].gz',algorithm:'gzip',test:/\.js$|\.css$|\.html$/,阈值:10240,//OnlyprocessresourceslargerthanthisvalueinbytesminRatio:0.8//只有压缩率小于这个值的资源才会被处理}])config.optimization.splitChunks({cacheGroups:{styles:{name:'styles',test:/\.(s?css|less|sass)$/,chunks:'all',priority:10},common:{name:'chunk-common',chunks:'all',minChunks:2,//拆分前必须共享模块的最小块数。maxInitialRequests:5,//加载打包好的入口文件时，可以同时加载的js文件（包括入口文件）的个数minSize:0,//生成的chunk的最小大小（≈20kb）优先级:1,//优化会优先使用优先级更高的缓存组reuseExistingChunk:true//如果当前块包含从主包中分离出来的模块，它将被重用而不是生成新模块},vendors:{name:'chunk-vendors',test:/[\\/]node_modules[\\/]/,chunks:'all',优先级:2,reuseExistingChunk:true},lrucache:{name:'chunk-lrucache',test:/[\\/]node_modules[\\/]_?lru-cache(.*)/,chunks:'all',优先级:3,reuseExistingChunk:true}}})}}})
