vue-cli4之vue.config.js打包优化
目录
- vue之cli之中的vue.config.js配置文件
-
- publicPath - 打包后 访问基础路径
- outputDir - 打包后输入的文件夹
- 使用gzip压缩打包的文件大小 - compression-webpack-plugin
- 配置别名
- 压缩js代码 - uglifyjs-webpack-plugin (去log等)
- 图片的压缩 - image-webpack-loader
- productionSourceMap: false,
- 打包后可视化文件大小的显示
- css相关配置
-
- requireModuleExtension （默认: true）
- css.extract
- css.sourceMap
- 服务器设置
- 完整的vue.config.js
- package.json
vue之cli之中的vue.config.js配置文件
参考于
- 官网
publicPath - 打包后 访问基础路径
- 假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置：publicPath: “xzl”
- xzl 就是项目目录路径
- 效果：
- 打包后访问的路径 与 运行项目的路径
module.exports = {
publicPath: "xzl", // 打包的输出路径
// 假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置：publicPath: "xzl"
}
outputDir - 打包后输入的文件夹
- outputDir: “xzl”, // 打包后的文件 默认为dist -> 若是项目名称为xzl 那么配合之 修改为xzl
- 效果
module.exports = {
publicPath: "/xzl", // 打包的输出路径
// 假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置：publicPath: "xzl"
outputDir: "xzl", // 打包后的文件 默认为dist -> 若是项目名称为xzl 那么配合之 修改为xzl
}
使用gzip压缩打包的文件大小 - compression-webpack-plugin
- 注意点：
npm i [email protected] 版本问题注意 - 效果：
- 没有使用compression-webpack-plugin前后效果
- 没有使用compression-webpack-plugin前后效果
var path = require('path')
var webpack = require('webpack')
// 压缩
const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugin('compressionPlugin')
.use(new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip', // 使用gzip压缩
test: productionGzipExtensions, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
minRatio: 0.8, // 压缩率小于0.8才会压缩
deleteOriginalAssets: true // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
}));
}
},
}
配置别名
- 再vue组件时候使用的时候
import Pagination from "@com/content/Pagination.vue";
var path = require('path')
var webpack = require('webpack')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
// 配置别名
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('@com', resolve('src/components'))
.set('@ass', resolve('src/assets'));
}
}
压缩js代码 - uglifyjs-webpack-plugin (去log等)
- 下载：
yarn add uglifyjs-webpack-plugin --save-dev - 效果：
var path = require('path')
var webpack = require('webpack')
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
configureWebpack: {
// 优化
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
output: { // 删除注释
comments: false
},
//生产环境自动删除console
compress: {
//warnings: false, // 若打包错误，则注释这行
drop_debugger: true, //清除 debugger 语句
drop_console: true, //清除console语句
pure_funcs: ['console.log']
}
},
sourceMap: false,
parallel: true
})
]
},
},
}
图片的压缩 - image-webpack-loader
- 下载：
yarn add [email protected] -D || npm install --save-dev image-webpack-loader - 官网：
https://www.npmjs.com/package/image-webpack-loader - 效果：
var path = require('path')
var webpack = require('webpack')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: "/xzl", // 打包的输出路径
// 假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置：publicPath: "/xzl"
outputDir: "xzl", // 打包后的文件 默认为dist -> 若是项目名称为xzl 那么配合之 修改为xzl
// 配置别名
chainWebpack: config => {
// 图片压缩
config.module
.rule('images')
.exclude.add(resolve('src/assets/icons')) // 排除icons目录，这些图标已用 svg-sprite-loader 处理，打包成 svg-sprite 了
.end()
.use('url-loader')
.tap(options => ({
limit: 10240, // 稍微改大了点
fallback: {
loader: require.resolve('file-loader'),
options: {
// 在这里修改file-loader的配置
// 直接把outputPath的目录加上，虽然语义没分开清晰但比较简洁
name: 'static/img/[name].[hash:8].[ext]',
esModule: false, //低版本默认为false，高版本默认为true 这里为6.2.0为高本版本所以要手动设置为false
}
}
}))
.end()
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
mozjpeg: { progressive: true, quality: 50 }, // 压缩JPEG图像
optipng: { enabled: true }, // 压缩PNG图像
pngquant: { quality: [0.5, 0.65], speed: 4 }, // 压缩PNG图像
gifsicle: { interlaced: false } // 压缩GIF图像
})
.end()
.enforce('post') // 表示先执行配置在下面那个loader，即image-webpack-loader
},
}
productionSourceMap: false,
- 在设置了vue.config.js之后，就不会生成map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。也就是说map文件相当于是查看源码的一个东西。如果不需要定位问题，并且不想被看到源码，就把productionSourceMap 置为false，既可以减少包大小，也可以加密源码
- source map 直译过来就是资源地图。所以，source map的作用就是定位。source map定位的时浏览器控制台输出语句在项目文件的位置。
module.exports = {
publicPath: "/xzl", // 打包的输出路径
// 假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置：publicPath: "/xzl"
outputDir: "xzl", // 打包后的文件 默认为dist -> 若是项目名称为xzl 那么配合之 修改为xzl
productionSourceMap: false,
}
打包后可视化文件大小的显示
- 下载：
yarn add webpack-bundle-analyzer -D - 注意点：
在jenkins(自动化部署)打包时把该配置去掉，否则打包不成功 - 运行：
npm run build --report - 结果：
Webpack Bundle Analyzer is started at http://127.0.0.1:8888等！http://127.0.0.1:8888使用这个路径即可访问以下效果
var path = require('path')
var webpack = require('webpack')
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: "/xzl", // 打包的输出路径
// 假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置：publicPath: "/xzl"
outputDir: "xzl", // 打包后的文件 默认为dist -> 若是项目名称为xzl 那么配合之 修改为xzl
productionSourceMap: false,
// 配置别名
chainWebpack: config => {
// 添加可视化工具 - 查看打包后的文件大小！
if (process.env.NODE_ENV === 'production') {
if (process.env.npm_config_report) {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
.end();
config.plugins.delete('prefetch')
}
}
},
}
css相关配置
requireModuleExtension （默认: true）
- 作用： 默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块
- 注意点：
配置了loaderOptions.css, 需要再一次强调一下 requireModuleExtension的值为true - 其他配置：链接
module.exports = {
// css相关配置
css: {
// 默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块(requireModuleExtension: false与loaderOptions配合使用会失效，因此要为true )
// 因为要配置了loaderOptions.css, 尽管requireModuleExtension的值为默认值，我们也需要指出
requireModuleExtension: true,
loaderOptions: {
css: {
modules: {
// 定义模块化类名！ hash值模式
localIdentName: '[local]_[hash:base64:8]'
}
}
}
},
}
css.extract
- 是否使用css分离插件 ExtractTextPlugin 简单来说就是为true时，打包会把css单独分文件出来打包，否则直接注入js之中打包
module.exports = {
// css相关配置
css: {
extract: false,
}
}
css.sourceMap
- 就是打包的时候会生成source map（资源联络匹配），精准找到css样式报错位置！
module.exports = {
// css相关配置
css: {
sourceMap: true,
}
}
服务器设置
- 热更新、自动打开浏览器、端口号配置、服务器代理
- 官网：
https://webpack.js.org/configuration/dev-server/
module.exports = {
// 服务器设置
devServer: {
port: 9999, // 端口
host: '0.0.0.0', // 允许外部ip访问 || localhost(本地)
open: true, // 自动打开浏览器
inline: true,// 用于设置代码保存时是否自动刷新页面
hot: true, //热加载 -> 用于设置代码保存时是否进行热更新 (局部刷新，不刷新整个页面)
// openPage: '/#/table',//运行项目后 自动打开的页面 hash的时候 需要使用/#/XX -> 非hash时则不用（/table是路由http://localhost:9999/xzl/#/table）
// https: true, // 用于设置是否启用https
compress: true, // gzip 压缩 用于减少服务器向前端传输的数据量，提高浏览的速度。
proxy: { //配置多个跨域
'/api': { //本地 这边的/api是配置默认请求的api ，这还需要在axios实例对象中设置
// target: process.env.VUE_APP_BASEURL,//服务器代理的baseUrl
//target: 'http://10.0.124.20:8090/xzl',
//target: 'http://10.0.124.20:8030/xzl',
target: 'http://10.0.124.20:8080/xzl',
ws: true, // 是否代理websocket
changeOrigin: true,//将主机头的来源更改为目标URL，也就是是否允许跨域
pathRewrite: {// 重写路径: 去掉路径中开头的'/api'
'^/api': ''
}
}
}
}
}
完整的vue.config.js
var path = require('path')
var webpack = require('webpack')
// 文件压缩
const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 引入css - rem的配置
// const px2rem = require('postcss-px2rem')
// const postcss = px2rem({
// remUnit: 16 //基准大小 baseSize，需要和rem.js中相同
// })
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: "/xzl", // 打包的输出路径
// 假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置：publicPath: "/xzl"
outputDir: "xzl", // 打包后的文件 默认为dist -> 若是项目名称为xzl 那么配合之 修改为xzl
productionSourceMap: true, // 生产环境是否生成 sourceMap 文件
// 配置别名
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('@com', resolve('src/components'))
.set('@ass', resolve('src/assets'));
if (process.env.NODE_ENV === 'production') {
config.plugin('compressionPlugin')
.use(new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip', // 使用gzip压缩
test: productionGzipExtensions, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
minRatio: 0.8, // 压缩率小于0.8才会压缩
deleteOriginalAssets: true // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
}));
}
// 图片压缩
config.module
.rule('images')
.exclude.add(resolve('src/assets/icons')) // 排除icons目录，这些图标已用 svg-sprite-loader 处理，打包成 svg-sprite 了
.end()
.use('url-loader')
.tap(options => ({
limit: 10240, // 稍微改大了点
fallback: {
loader: require.resolve('file-loader'),
options: {
// 在这里修改file-loader的配置
// 直接把outputPath的目录加上，虽然语义没分开清晰但比较简洁
name: 'static/img/[name].[hash:8].[ext]',
esModule: false, //低版本默认为false，高版本默认为true 这里为6.2.0为高本版本所以要手动设置为false
}
}
}))
.end()
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
mozjpeg: { progressive: true, quality: 50 }, // 压缩JPEG图像
optipng: { enabled: true }, // 压缩PNG图像
pngquant: { quality: [0.5, 0.65], speed: 4 }, // 压缩PNG图像
gifsicle: { interlaced: false } // 压缩GIF图像
})
.end()
.enforce('post');// 表示先执行配置在下面那个loader，即image-webpack-loader
// // 添加可视化工具 - 查看打包后的文件大小！
// if (process.env.NODE_ENV === 'production') {
// if (process.env.npm_config_report) {
// config
// .plugin('webpack-bundle-analyzer')
// .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
// .end();
// config.plugins.delete('prefetch')
// }
// }
},
// css相关配置
css: {
extract: false, // 是否使用css分离插件 ExtractTextPlugin 简单来说就是为true时，打包会把css单独分文件出来打包，否则直接注入js之中打包
// sourceMap: true, // 开启 CSS source maps?
// 默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块(requireModuleExtension: false与loaderOptions配合使用会失效，因此要为true )
// 因为要配置了loaderOptions.css, 尽管requireModuleExtension的值为默认值，我们也需要指出
requireModuleExtension: true,
loaderOptions: {
css: {
modules: {
// 定义模块化类名 hash值模式
localIdentName: '[local]_[hash:base64:8]'
}
}
}
},
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
}),
],
// 优化
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
output: { // 删除注释
comments: false
},
//生产环境自动删除console
compress: {
//warnings: false, // 若打包错误，则注释这行
drop_debugger: true, //清除 debugger 语句
drop_console: true, //清除console语句
pure_funcs: ['console.log']
}
},
sourceMap: false,
parallel: true
})
]
},
},
// 服务器设置
devServer: {
port: 9999, // 端口
host: '0.0.0.0', // 允许外部ip访问 || localhost(本地)
open: true, // 自动打开浏览器
inline: true,// 用于设置代码保存时是否自动刷新页面
hot: true, //热加载 -> 用于设置代码保存时是否进行热更新 (局部刷新，不刷新整个页面)
// openPage: '/#/table',//运行项目后 自动打开的页面 hash的时候 需要使用/#/XX -> 非hash时则不用（/table是路由http://localhost:9999/xzl/#/table）
// https: true, // 用于设置是否启用https
compress: true, // gzip 压缩 用于减少服务器向前端传输的数据量，提高浏览的速度。
proxy: { //配置多个跨域
'/api': { //本地 这边的/api是配置默认请求的api ，这还需要在axios实例对象中设置
// target: process.env.VUE_APP_BASEURL,//服务器代理的baseUrl
//target: 'http://10.0.124.20:8090/xzl',
//target: 'http://10.0.124.20:8030/xzl',
target: 'http://10.0.124.20:8080/xzl',
ws: true, // 是否代理websocket
changeOrigin: true,//将主机头的来源更改为目标URL，也就是是否允许跨域
pathRewrite: {// 重写路径: 去掉路径中开头的'/api'
'^/api': ''
}
}
}
}
}
package.json
{
"name": "vue_xpl",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@jiaminghi/data-view": "^2.10.0",
"async-validator": "^4.0.7",
"autoprefixer": "^10.4.2",
"axios": "^0.21.1",
"compression-webpack-plugin": "^5.0.1",
"core-js": "^3.15.2",
"css-loader": "^5.2.6",
"echarts": "^4.9.0",
"element-ui": "^2.15.3",
"jquery": "^3.5.1",
"postcss-px2rem": "^0.3.0",
"qs": "^6.10.1",
"sass": "^1.35.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue": "^2.6.11",
"vue-i18n": "^8.24.5",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.2.0",
"vue-seamless-scroll": "^1.1.23",
"vuedraggable": "^2.24.3",
"vuex": "^3.4.0",
"ztree": "^3.5.24"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"babel-plugin-component": "^1.1.1",
"babel-polyfill": "^6.26.0",
"browserslist": "^4.19.1",
"caniuse-lite": "^1.0.30001300",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"image-webpack-loader": "8.0.1",
"mini-css-extract-plugin": "^2.5.2",
"node-sass": "^4.12.0",
"sass-loader": "^10.0.5",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.0.0",
"webpack-bundle-analyzer": "^4.5.0"
}
}