.babelrc1、安装compression-webpack-plugin
修改 vue.config.js 配置 plugin optimization.splitChunks 减少包体积
2、配置cdn, 将 vuex, vue, vant, router 引入放在 public /cdn 中,配置index.html
3、配置按需引入
安装babel-plugin-import,它可以让我们按需引入组件模块
并在.babelrc中配置plugins
.babelrcvue.config.js :
const path = require('path')
const defaultSettings = require('./src/settings.js')
const CompressionPlugin = require('compression-webpack-plugin')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = defaultSettings.title || 'airport-app' // page title
const port = process.env.port || process.env.npm_config_port || 9528 // dev port
module.exports = {
publicPath: process.env.VUE_APP_BASE_PATH,
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
// https: true,
compress: true,
useLocalIp: true,
port: port,
open: true,
overlay: {
warnings: false,
errors: true,
},
before: require('./mock/mock-server.js'),
proxy: {
'/api': {
//本地服务接口地址
target: 'https://test.com/api',
ws: true,
pathRewrite: {
'^/api': '/',
},
},
},
},
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src'),
},
},
plugins: [
new CompressionPlugin({
/* [file]被替换为原始资产文件名。 [path]替换为原始资产的路径。 [dir]替换为原始资产的目录。
[name]被替换为原始资产的文件名。[ext]替换为原始资产的扩展名。 [query]被查询替换。*/
filename: '[path][base].gz',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/, //匹配文件
threshold: 10240, //压缩超过此大小的文件,以字节为单位
minRatio: 0.8,
// deleteOriginalAssets: true, //删除原始文件只保留压缩后的文件
}),
],
},
chainWebpack(config) {
//忽略的打包文件 打包文件配置在 public/cdn下 , index.html中做静态文件引入
config.externals({
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
vant: 'vant',
})
config.plugin('preload').tap(() => [
{
rel: 'preload',
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial',
},
])
//svg图标用
config.plugins.delete('prefetch')
config.module.rule('svg').exclude.add(resolve('src/icons')).end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
.end()
config.when(process.env.NODE_ENV !== 'development', (config) => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [
{
inline: /runtime\..*\.js$/,
},
])
.end()
config.optimization.splitChunks({
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 20000,
cacheGroups: {
libs: {
name: 'chunk-vendor',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial', // only package third parties that are initially dependent
},
vant: {
name: 'chunk-vant', // split vant into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?vant(.*)/, // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true,
},
},
})
// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
config.optimization.runtimeChunk('single')
})
},
}
.babelrc
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import",{"libraryName":"vant","style":true}]
]
import {Row,Col} from 'vant' Vue.use(Row).use.(Col)
index.html中引入
<script src="<%= BASE_URL %>cdn/vue/2.6.10/vue.min.js"></script>
<script src="<%= BASE_URL %>cdn/vuex/3.1.1/vuex.min.js"></script>
<script src="<%= BASE_URL %>cdn/vue-router/3.0.1/vue-router.min.js"></script>
<script src="<%= BASE_URL %>cdn/axios/0.18.1/axios.min.js"></script>
<script src="<%= BASE_URL %>cdn/vant/2.12/vant.min.js"></script>