webpack + vite 打包优化

webpack 优化

1、依赖转化，兼容低版本浏览器

// 对依赖进行转换
transpileDependencies: true,

2、生产环境关闭sourceMap

// 生产关闭sourceMap
productionSourceMap: false,

3、打包输出目录名称修改和静态资源的存放

outputDir: 'bundle', // 打包后文件的目录 （默认为dist）
assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录  默认为‘’没有单独目录js/css/img在根目录中。

4、修改图标

// 修改浏览器的icon图标，不加下面的，修改浏览器图标不生效
pwa: {iconPaths: {favicon32: 'favicon.ico',favicon16: 'favicon.ico',appleTouchIcon: 'favicon.ico',maskIcon: 'favicon.ico',msTileImage: 'favicon.ico',}
}

5、修改webpack配置

5-1、写在此处的配置可以覆盖掉脚手架本来就预设上有的配置

chainWebpack: config => {config.optimization.minimizer('terser').tap(args => {// 删除代码中的注释和打印，减少一点代码体积args.forEach(item => {if (item.hasOwnProperty('terserOptions')) {Object.assign(item['terserOptions'].compress, {drop_debugger: true,drop_console: true,pure_funcs: ['console.log']})}item['terserOptions']['format'] = {comments: false}})return args})// 开启 gzip 压缩if (process.env.NODE_ENV === "production") {config.plugin('CompressionPlugin').use(new CompressionWebpackPlugin({test: /\.(js|css|less|scss|html)$/,   // 将 css、scss、less、html 进行压缩threshold: 10240, // 超过10kb的文件就压缩deleteOriginalAssets: false, // 不删除源文件minRatio: 0.8,   // 最小压缩率 0.8algorithm: 'gzip'}))}
}

5-2、写在此处的都是预设没有配置的，脚手架本来就有的配置是不会覆盖的

configureWebpack: {// 代码分割optimization: {splitChunks: {chunks: "all",// 定义一个cache组，将第三方的包抽离出来cacheGroups: {elementUI: {// 抽离出来的名字name: "element-chunk-vendors",// 在node_modules包里面找test: /[\\/]node_modules[\\/]_?element-ui(.*)/,// 权重，越大优先打包priority: 30,},vue: {name: "vue-chunk-vendors",test: /[\\/]node_modules[\\/]vue(.*)[\\/]/,chunks: "initial",priority: 20,reuseExistingChunk: true,},vueRouter: {name: "vueRouter-chunk-vendors",test: /[\\/]node_modules[\\/]vue-router(.*)[\\/]/,chunks: "initial",priority: 19,},vuex: {name: "vuex-chunk-vendors",test: /[\\/]node_modules[\\/]vuex(.*)[\\/]/,chunks: "initial",priority: 18,},echarts: {name: "echarts-chunk-vendors",test: /[\\/]node_modules[\\/]echarts(.*)[\\/]/,chunks: "initial",priority: 17,},// 剩下的别忘记单独抽离libs: {name: "chunk-libs-vendors",test: /[\\/]node_modules[\\/]/,priority: 1, // 权重最低，优先考虑前面内容chunks: "initial",},// 针对自己写的代码，重复使用的满足下面的配置就会抽离出来单独打包，比如 utils 下面的包default: {// 其他没有写的配置会使用上面的默认值test: /[\\/]src(.*)[\\/]/,name: "common-chunk",minSize: 20000, // 超过 20kb，就会拆包minChunks: 2,  // 引用两次就会拆包priority: -10,reuseExistingChunk: true}}}},// 配置别名resolve: {alias: {"#": path.resolve(__dirname, "src")}},// 分析插件plugins: [new BundleAnalyzer({analyzerMode: 'server',analyzerHost: '127.0.0.1',analyzerPort: 8088,reportFilename: 'report.html',defaultSizes: 'parsed',openAnalyzer: true,generateStatsFile: false,statsFilename: 'state.json',statsOptions: null,logLevel: 'info'})]
}

6、完整配置

const path = require("path")
const { defineConfig } = require('@vue/cli-service')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.exports = defineConfig({// 对依赖进行转换transpileDependencies: true,// 生产关闭sourceMapproductionSourceMap: false,outputDir: 'bundle', // 打包后文件的目录 （默认为dist）assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录  默认为‘’没有单独目录js/css/img在根目录中。// 修改浏览器的icon图标pwa: {iconPaths: {favicon32: 'favicon.ico',favicon16: 'favicon.ico',appleTouchIcon: 'favicon.ico',maskIcon: 'favicon.ico',msTileImage: 'favicon.ico',}},// webpack 配置（写在此处的配置可以覆盖掉脚手架本来就预设上有的配置）chainWebpack: config => {config.optimization.minimizer('terser').tap(args => {// 删除代码中的注释和打印，减少一点代码体积args.forEach(item => {if (item.hasOwnProperty('terserOptions')) {Object.assign(item['terserOptions'].compress, {drop_debugger: true,drop_console: true,pure_funcs: ['console.log']})}item['terserOptions']['format'] = {comments: false}})return args})// 开启 gzip 压缩，对应的 nginx 也需要配置if (process.env.NODE_ENV === "production") {config.plugin('CompressionPlugin').use(new CompressionWebpackPlugin({test: /\.(js|css|less|scss|html)$/,   // 将 css、scss、less、html 进行压缩threshold: 10240, // 超过10kb的文件就压缩deleteOriginalAssets: false, // 不删除源文件minRatio: 0.8,   // 最小压缩率 0.8algorithm: 'gzip'}))}},// webpack 配置(写在此处的都是预设没有配置的，脚手架本来就有的配置是不会覆盖的)configureWebpack: {// 代码分割optimization: {splitChunks: {chunks: "all",// 定义一个cache组，将第三方的包抽离出来cacheGroups: {elementUI: {// 抽离出来的名字name: "element-chunk-vendors",// 在node_modules包里面找test: /[\\/]node_modules[\\/]_?element-ui(.*)/,// 权重，越大优先打包priority: 30,},vue: {name: "vue-chunk-vendors",test: /[\\/]node_modules[\\/]vue(.*)[\\/]/,chunks: "initial",priority: 20,reuseExistingChunk: true,},vueRouter: {name: "vueRouter-chunk-vendors",test: /[\\/]node_modules[\\/]vue-router(.*)[\\/]/,chunks: "initial",priority: 19,},vuex: {name: "vuex-chunk-vendors",test: /[\\/]node_modules[\\/]vuex(.*)[\\/]/,chunks: "initial",priority: 18,},echarts: {name: "echarts-chunk-vendors",test: /[\\/]node_modules[\\/]echarts(.*)[\\/]/,chunks: "initial",priority: 17,},// 剩下的别忘记单独抽离libs: {name: "chunk-libs-vendors",test: /[\\/]node_modules[\\/]/,priority: 1, // 权重最低，优先考虑前面内容chunks: "initial",},// 针对自己写的代码，重复使用的满足下面的配置就会抽离出来单独打包，比如 utils 下面的包default: {// 其他没有写的配置会使用上面的默认值test: /[\\/]src(.*)[\\/]/,name: "common-chunk",minSize: 20000, // 超过 20kb，就会拆包minChunks: 2,  // 引用两次就会拆包priority: -10,reuseExistingChunk: true}}}},// 配置别名resolve: {alias: {"#": path.resolve(__dirname, "src")}},plugins: [new BundleAnalyzer({analyzerMode: 'server',analyzerHost: '127.0.0.1',analyzerPort: 8088,reportFilename: 'report.html',defaultSizes: 'parsed',openAnalyzer: true,generateStatsFile: false,statsFilename: 'state.json',statsOptions: null,logLevel: 'info'})]}
})// 打包分析工具加了之后 启动需要加上："build": "vue-cli-service build","build:analyze": "cross-env NODE_ENV=production npm_config_report=true vue-cli-service build"

https://juejin.cn/post/6951297954770583565

vite 优化

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import viteCompression from "vite-plugin-compression";// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),Components({//自定义的模块dirs: ['src/components'],extensions: ['vue', 'ts'],resolvers: [ElementPlusResolver()]}),AutoImport({ // 插件进行自动导入相关的依赖库//安装两行后你会发现在组件中不用再导入ref，reactive等imports: ['vue', 'vue-router'],// 可选，用于自动导入组件类型dts: 'src/components.d.ts'}),// 开启gzip压缩viteCompression({verbose: true,disable: false,threshold: 10240,algorithm: 'gzip',ext: '.gz',})],// 打包build: {// 打包删除 console 和 debugger minify: "terser",terserOptions: {compress: {drop_console: true,drop_debugger: true}},rollupOptions: {output: {  //静态资源分类打包chunkFileNames: 'static/js/[name]-[hash].js',entryFileNames: 'static/js/[name]-[hash].js',assetFileNames: 'static/[ext]/[name]-[hash].[ext]',manualChunks(id: string) { // node_modules 拆包if (id.indexOf('node_modules') !== -1) {if (id.indexOf('vue') !== -1) {return id.toString().split('node_modules/')[1].split('/')[0].toString();}if (id.indexOf('vue-router') !== -1) {return id.toString().split('node_modules/')[1].split('/')[0].toString();}if (id.indexOf('pinia') !== -1) {return id.toString().split('node_modules/')[1].split('/')[0].toString();}if (id.indexOf('element-plus') !== -1) {return id.toString().split('node_modules/')[1].split('/')[0].toString();}}}}}}
});