一.查看自己的打包详情,那个文件过大
1.npm安装要用的插件
npm install --save-dev webpack-bundle-analyzer
2.在vue.config.js文件中引入插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
3.添加配置,使用的是默认的配置
module.exports = {
configureWebpack: {
plugins: [
// 查看打包详细配置
new BundleAnalyzerPlugin(),
]
}
}
4.然后直接运行项目,就会默认打开http://127.0.0.1:8888为项目的打包详情
二.使用gzip对打包之后的文件进行压缩,超有用,但是会增加服务器的cpu使用率
1.安装需要的插件
npm install --save-dev compression-webpack-plugin
2.在头部引入插件
const path = require('path');
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'
3.添加配置文件
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@i': path.resolve(__dirname, './src/assets'),
}
},
plugins: [
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// 配置compression-webpack-plugin压缩
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
minChunkSize: 100
})
]
}
}
4.运行打包命令 npm run build 就可以,在打包出来的文件中就包含.gz文件,直接放置在服务器上即可
检测有没有成功试用,可以通过请求头
,也可以通过文件的大小查看
最后贴一下整个vue.config.js文件,有什么还可以优化的欢迎指点
const path = require('path');
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
lintOnSave: false,
publicPath: './',
outputDir: "newad",
productionSourceMap: false,
configureWebpack: {
externals: {
'vue': 'Vue',
// 'vue-router': 'VueRouter',
'router': 'VueRouter',
'axios': 'axios',
'vant': 'vant'
//包名 : 全局变量
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@i': path.resolve(__dirname, './src/assets'),
}
},
plugins: [
// 查看打包详细配置
// new BundleAnalyzerPlugin(),
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// 配置compression-webpack-plugin压缩
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
minChunkSize: 100
})
]
}
}