Skip to content

M
myblogVue_django

yma16 / myblogVue_django

通知 5
Star 1
Fork 0
M
myblogVue_django
提交 a4845712 编写于 作者: yma16's avatar yma16
浏览文件
操作

perf:gzip打包优化-build分支 图片压缩

上级 0c213cb7
隐藏空白更改
内联 并排
Showing with 92 addition and 86 deletion
build/webpack.prod.conf.js
浏览文件 @ a4845712
"use strict";
const path = require("path");
const utils = require("./utils");
const webpack = require("webpack");
const config = require("../config");
const merge = require("webpack-merge");
const baseWebpackConfig = require("./webpack.base.conf");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env =
process.env.NODE_ENV === "testing"
? require("../config/test.env")
: require("../config/prod.env");
process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: require('../config/prod.env')
// cdn 引入
let externalModules = {};
let externalModules = {}
//cdn 配置
let externalConfig = [];
if (process.env.NODE_ENV === "production") {
let externalConfig = []
if (process.env.NODE_ENV === 'production') {
//生产环境
externalModules = {
vue: "Vue",
"vue-router": "VueRouter",
vuex: "Vuex",
axios: "axios",
"element-ui": "element-ui",
echarts: "echarts",
'vuex-persistedstate':'persistedstate',
'highlight':'hljs'
};
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
'element-ui': 'element-ui',
echarts: 'echarts',
highlight: 'hljs',
}
externalConfig = [
{ js: "https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js", css: "" },
{js: 'https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js', css: ''},
{
js: "https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js",
css: "",
js: 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js',
css: '',
},
{ js: "https://unpkg.com/axios/dist/axios.min.js", css: "" },
{ js: "https://cdn.bootcss.com/vuex/3.6.2/vuex.min.js", css: "" },
{js: 'https://unpkg.com/axios/dist/axios.min.js', css: ''},
{js: 'https://cdn.bootcss.com/vuex/3.6.2/vuex.min.js', css: ''},
{
js: "https://unpkg.com/element-ui/lib/index.js",
css: "https://unpkg.com/element-ui/lib/theme-chalk/index.css",
js: 'https://unpkg.com/element-ui/lib/index.js',
css: 'https://unpkg.com/element-ui/lib/theme-chalk/index.css',
},
{
js: "https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js",
css: "",
js: 'https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js',
css: '',
},
{
js: "https://cdn.bootcdn.net/ajax/libs/highlight.js/11.6.0/highlight.min.js",
css: "",
js: 'https://cdn.bootcdn.net/ajax/libs/highlight.js/11.6.0/highlight.min.js',
css: '',
},
{
js: "",
css: "https://cdn.bootcdn.net/ajax/libs/github-markdown-css/5.1.0/github-markdown-dark.css",
js: '',
css: 'https://cdn.bootcdn.net/ajax/libs/github-markdown-css/5.1.0/github-markdown-light.min.css',
},
{js:'https://cdn.bootcdn.net/ajax/libs/vuex-persistedstate/4.1.0/vuex-persistedstate.es.min.js',css:''}
];
{
js: '',
css: 'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css',
},
]
}
const webpackConfig = merge(baseWebpackConfig, {
......@@ -72,13 +74,13 @@ const webpackConfig = merge(baseWebpackConfig, {
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath("js/[name].[chunkhash].js"),
chunkFilename: utils.assetsPath("js/[id].[chunkhash].js"),
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
"process.env": env,
'process.env': env,
}),
new UglifyJsPlugin({
uglifyOptions: {
......@@ -91,7 +93,7 @@ const webpackConfig = merge(baseWebpackConfig, {
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath("css/[name].[contenthash].css"),
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
......@@ -102,16 +104,16 @@ const webpackConfig = merge(baseWebpackConfig, {
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true },
? {safe: true, map: {inline: false}}
: {safe: true},
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename:
process.env.NODE_ENV === "testing" ? "index.html" : config.build.index,
template: "index.html",
process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
......@@ -121,7 +123,7 @@ const webpackConfig = merge(baseWebpackConfig, {
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: "dependency",
chunksSortMode: 'dependency',
cdnConfig: externalConfig, // cdn配置
onlyCss: true, //dev下只加载css
}),
......@@ -131,28 +133,28 @@ const webpackConfig = merge(baseWebpackConfig, {
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks(module) {
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(path.join(__dirname, "../node_modules")) === 0
);
module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0
)
},
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: "manifest",
name: 'manifest',
minChunks: Infinity,
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: "app",
async: "vendor-async",
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3,
}),
......@@ -160,37 +162,37 @@ const webpackConfig = merge(baseWebpackConfig, {
// copy custom myblog_static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, "../myblog_static"),
from: path.resolve(__dirname, '../myblog_static'),
to: config.build.assetsSubDirectory,
ignore: [".*"],
ignore: ['.*'],
},
]),
],
});
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
"\\.(" + config.build.productionGzipExtensions.join("|") + ")$"
'\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
),
threshold: 10240,
minRatio: 0.8,
})
);
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
if (config.build.isIgnoreLogs) {
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
let optimization = [
new UglifyJsPlugin({
uglifyOptions: {
......@@ -198,14 +200,14 @@ if (config.build.isIgnoreLogs) {
warnings: false,
drop_debugger: true, //去掉debugger
drop_console: true, // 去掉console
pure_funcs: ["console.log"], // 移除console
pure_funcs: ['console.log'], // 移除console
},
},
sourceMap: config.build.productionSourceMap,
parallel: true,
}),
];
webpackConfig.plugins.push(...optimization);
]
webpackConfig.plugins.push(...optimization)
}
module.exports = webpackConfig;
module.exports = webpackConfig
index.html
浏览文件 @ a4845712
......@@ -20,11 +20,12 @@
overflow: hidden;
}
</style>
<!-- cdn -->
<!-- cdn css-->
<% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.css){ %>
<link href="<%= item.css %>" rel="stylesheet" />
<% }}) %>
<!-- -->
</head>
<!-- 阿里 -->
<style type="text/css">
......@@ -36,11 +37,12 @@
overflow: hidden;
}
</style>
<!-- cdn -->
<% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.js && !htmlWebpackPlugin.options.onlyCss){ %>
<body>
<!-- cdn js -->
<% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.js){ %>
<script type="text/javascript" src="<%= item.js %>"></script>
<% }}) %>
<body>
<div id="app"></div>
<div id="canvas">
<div id="life"></div>
......
src/main.js
浏览文件 @ a4845712
......@@ -3,16 +3,17 @@
// import Vue from 'vue'
// import VueRouter from 'vue-router'
// import axios from 'axios'
// import cookies from 'vue-cookies'
// import hljs from 'highlight.js'
import useRouter from './router'
import cookies from 'vue-cookies'
import App from './App'
import importElementComponents from './importElement'
import importEchartsComponents from './importEchartsComponents'
// import importElementComponents from './importElement'
// import importEchartsComponents from './importEchartsComponents'
// 样式
// import 'github-markdown-css/github-markdown.css'
// import 'nprogress/nprogress.css'
import 'highlight.js/styles/github.css'
import 'nprogress/nprogress.css'
const env = process.env.NODE_ENV
// 生产环境
......@@ -21,11 +22,11 @@ if (env === 'production') {
// 路由
const router = useRouter(Vue, VueRouter)
// 按需引入elementui
importElementComponents(Vue)
// 按需引入echarts
importEchartsComponents(Vue)
// // 按需引入elementui
// importElementComponents(Vue)
//
// // 按需引入echarts
// importEchartsComponents(Vue)
Vue.config.productionTip = false
Vue.use(cookies)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或