Vue-Cli 2.0 CDN和Gzip压缩
CDN
-
webpack.base.conf.js
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
// externals: {
// vue: 'Vue',
// element: 'ElementUI',
// },
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
},
//添加开始
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': 'axios',
'vue-lazyload': 'VueLazyload',
'element-ui': 'ELEMENT',
'@antv/g2': 'G2',
'clipboard': 'ClipboardJS',
'js-cookie': 'Cookies',
'vue-i18n': 'VueI18n',
'qs': 'Qs',
'vuex': 'Vuex'
}
//添加结束
}
-
webpack.dev.conf.js
new HtmlWebpackPlugin(Object.assign(
{
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: path.join('favicon.ico')
},
config.dev.cdn
)
),
-
webpack.prod.conf.js
new HtmlWebpackPlugin(Object.assign({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: path.join('favicon.ico'),
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}, config.build.cdn)),
-
config/index.js
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/mch-api': {
// target: 'http://localhost:8080',
target: 'http://10.0.0.248:8080/mch-api',
changeOrigin: true,/* 允许跨域 */
pathRewrite: {
"^/mch-api": ""
}
},
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true,
//添加开始
cdn: {
js: [
"https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js",
"https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.js",
"https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js",
"https://cdn.jsdelivr.net/npm/vue-lazyload@1.3.3/vue-lazyload.js",
"https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.13.2/index.js",
// "https://cdn.jsdelivr.net/npm/@antv/g2@4.0.15/lib/index.min.js",
"https://cdn.jsdelivr.net/npm/@antv/g2@3.5.7/dist/g2.min.js",
"https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js",
"https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.js",
"https://cdn.jsdelivr.net/npm/vue-i18n@8.21.0/dist/vue-i18n.min.js",
"https://cdn.jsdelivr.net/npm/qs@6.9.1/dist/qs.js",
"https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js",
]
//添加结束
}
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report,
//添加开始
cdn: {
js: [
"https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
"https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js",
"https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js",
"https://cdn.jsdelivr.net/npm/vue-lazyload@1.3.3/vue-lazyload.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.13.2/index.js",
// "https://cdn.jsdelivr.net/npm/@antv/g2@4.0.15/lib/index.min.js",
"https://cdn.jsdelivr.net/npm/@antv/g2@3.5.7/dist/g2.min.js",
"https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js",
"https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.js",
"https://cdn.jsdelivr.net/npm/vue-i18n@8.21.0/dist/vue-i18n.min.js",
"https://cdn.jsdelivr.net/npm/qs@6.9.1/dist/qs.js",
"https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js",
]
//添加结束
}
}
}
-
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>商户管理</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app"></div>
<% for (var i in htmlWebpackPlugin.options.js&&htmlWebpackPlugin.options.js) { %>
<script src="<%= htmlWebpackPlugin.options.js[i] %>"></script>
<% } %>
</body>
</html>
GZIP
-
webpack.prod.conf.js 与webpackConfig同级添加以下
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
-
config/index.js
//改为true
productionGzip: true,
如果报错,可能是plugin版本太高,降低即可
npm install --save-dev compression-webpack-plugin@1.1.12
-
去掉所有的console
在 webpack.prod.conf.js 的 UglifyJsPlugin添加一句
compress:{
warnings:false,
//添加开始
drop_console:true,
pure_funcs:['console.log']
//添加结束
}
Vue-Cli 3.0 CDN和Gzip压缩
-
vue.config.js
安装
npm i -D compression-webpack-plugin
引入
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const path = require('path');
与devServer同级 添加
configureWebpack: {
// 使用CDN
externals: {
vue: 'Vue',
'vue-i18n': 'VueI18n',
axios: 'axios',
'vue-router': 'VueRouter',
vuex: 'Vuex',
'element-ui': 'ELEMENT'
},
plugins: [
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
// test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
test: /\.(js|css)$/,
threshold: 10240,
minRatio: 0.8
})
]
}
-
index.html 在head中
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-i18n@8.15.1/dist/vue-i18n.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.4.11/index.js"></script>
网友评论