nuxt按需引入组件库(却加载所有图标问题),nuxt性能优化。
做一个官网,nuxt按需引入了antd_vue组件库,但是项目打包时,图标却又500K+,经过排查,发现icon和其他组件环环相扣的。如下:(我引入了这个翻页的组件,里面包含了两个翻页的图标)
但是它里面确实直接引入了所有的icon图标。解决方案:
const path = require('path'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const CompressionPlugin = require("compression-webpack-plugin"); export default { build: { extractCSS: true, // analyze: true, // 为防止重复打包 vendor: ['axios'], analyza: { analyzeMode: 'static' }, plugins: [ // 内存占用大小查看 // new BundleAnalyzerPlugin(), // gzip压缩 new CompressionPlugin({ test: /\.(js|css|png|jpg)(\?.*)?$/i, //需要压缩的文件正则 threshold: 10240, //文件大小大于这个值时启用压缩 deleteOriginalAssets: false, //压缩后保留原文件 }) ], assetFilter: function(assetFilename) { return assetFilename.endsWith('.js'); }, optimization: { splitChunks: { minSize: 10000, maxSize: 250000 } }, extend(config, { isDev, isClient }) { // 通过配置别名,处理图标过大问题,当请求这个@ant-design/icons/lib/dist$图标地址时,请求本地按需加载的icon.js
config.resolve.alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './plugins/icons.js') }
},
}