图片优化
使用 url-loader 优化， 将小图片转化成base64压缩,防止小图片太多请求次数太多。
下载 url-loader
npm install -D url-loader
配置
在 webpack.prod.conf.js 文件夹中配置
module: {
rules: [{
test: /\.(png|svg|jpg|gif)$/,
use: [{
loader: 'url-loader', // 优化小图片过多造成请求数太多
options: {
limit: 8192, // 如果图片小于 8192 bytes 就直接 base64 内置到模板，否则才拷贝
outputPath: 'img/'
}
}]
},
分离第三方包
打包后的bundle.js文件夹较大，所以每次加载的时候，请求比较慢，所以有必要在打包时将第三方包分离出来。使用CommonsChunkPlugin 插件进行配置。
在 webpack.prod.conf.js 文件夹中配置
//引入webpack
const webpack = require('webpack')
//将 entry 改成一个对象
entry: {
vendor: ['babel-polyfill', "axios", "marked", "react", "react-dom", "react-router-dom"], // 第三方文件
app: './src/main.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vendor", // 当加载 vendor 中的资源的时候，把这些资源都合并到 vendor.js 文件中
filename: "js/vendor.js",
minChunks: Infinity,
})
],
分离 css 文件并压缩 css 文件
使用 extract-text-webpack-plugin 插件将css文件分离出来。为了使项目加载时候尽早优先加载css样式，也为了解决js文件体积过大的问题
下载 extract-text-webpack-plugin
npm install -D extract-text-webpack-plugin
配置
在 webpack.prod.conf.js 文件夹中配置
//引入
const ExtractTextPlugin = require("extract-text-webpack-plugin")
// 配置分离 css 文件
plugins: [
new ExtractTextPlugin("css/styles.css"), // 把抽离出来的 css 文件打包到 styles.css 文件中
],
module: {
rules: [ {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: {
loader: 'css-loader',
options: {
minimize: true
}
}
})
},
} ]
// 配置压缩css (直接配置 css-loader 属性的选项)
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
//这个地方配置一个对象，添加一个属性进行压缩css文件
use: {
loader: 'css-loader',
options: {
minimize: true // 配置minimize 值为true，压缩css 文件
}
}
})
},
压缩 js 文件
使用 uglifyjs-webpack-plugin 将js压缩，减少打包后的 vendor.js , bundle.js 等js的文件大小
下载 uglifyjs-webpack-plugin
npm install -D uglifyjs-webpack-plugin
配置
在webpack.prod.conf.js 文件夹中配置
//引入
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//配置
plugins: [
new UglifyJsPlugin(), // 压缩 JavaScript
],
压缩Html
为了减少打包后的文件体积，使性能更好，效率更高，提高加载速度，打包时有必要进行压缩。
使用html-webpack-plugin 进行压缩
下载 html-webpack-plugin
npm install -D html-webpack-plugin
配置
在 webpack.prod.conf.js 文件中配置
// 引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 配置
plugins: [
new HtmlWebpackPlugin({
template: './index.html', // 把 index.html 也打包到 dist 目录中
// 压缩 html，默认 false 不压缩
minify: {
collapseWhitespace: true, // 去除回车换行符以及多余空格
removeComments: true, // 删除注释
}
}),]
第二种方法
新建vue.config.js,设置静态资源路径为’./’,否则打包后项目无法运行
module.exports = {
publicPath: "./"
}
关闭生产环境下的SourceMap映射文件,包的大小减少80%；
module.exports = {
productionSourceMap: false,
}
跨域配置
module.exports = {
devServer: {
open: false, // 自动启动浏览器
host: '0.0.0.0', // localhost
port: 6060, // 端口号
hotOnly: false, // 热更新
overlay: {
// 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
warnings: false,
errors: true
},
proxy: {
//配置跨域
'/api': {
target: 'https://www.test.com', // 接口的域名
// ws: true, // 是否启用websockets
changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
pathRewrite: {
'^/api': '/'
}
}
}
}
}
配置 alias 别名
//加载path模块
const path = require('path')
//定义resolve方法，把相对路径转换成绝对路径
const resolve = dir => path.join(__dirname, dir)
module.exports = {
chainWebpack: config => {
// 添加别名
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('api', resolve('src/api'))
.set('views', resolve('src/views'))
.set('components', resolve('src/components'))
}
}
配置完成后，我们在项目中可以这样写路径
//之前这么写
import Home from '../views/Home.vue'
//配置alias别名后
import Home from 'views/Home.vue'
//也可以这么写
import Home from '@/views/Home.vue'
使用CDN 加速优化
cdn优化是指把第三方库比如（vue，vue-router，axios）通过cdn的方式引入项目中，这样vendor.js会显著减少，并且大大提升项目的首页加载速度，下面是具体操作：
const isProduction = process.env.NODE_ENV === 'production';
// externals
const externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
vant: 'vant',
axios: 'axios'
}
// CDN外链，会插入到index.html中
const cdn = {
// 开发环境
dev: {
css: [],
js: []
},
// 生产环境
build: {
css: ['https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'],
js: [
'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'
]
}
}
module.exports = {
configureWebpack: config => {
// 为生产环境修改配置...
if (isProduction) {
// externals
config.externals = externals
}
},
chainWebpack: config => {
/**
* 添加CDN参数到htmlWebpackPlugin配置中
*/
config.plugin('html').tap(args => {
if (isProduction) {
args[0].cdn = cdn.build
} else {
args[0].cdn = cdn.dev
}
return args
})
}
}
在 public/index.html 中添加
<!-- 使用CDN的CSS文件 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
总结：配置了cdn引入，1.1M体积较少到660kb。效果很明显。
去除console.log打印以及注释
下载插件
cnpm install uglifyjs-webpack-plugin --save-dev
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';
configureWebpack: config => {
const plugins = [];
if (isProduction) {
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
},
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log']//移除console
}
}
})
)
}
},
在vue.config.js,中添加
结论：重新打包，dist体积减少并不大。因为congsole.log()以及注释并不会占用太多体积,取决于项目中注释，和console.log()数量
最后代码完成图
