diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js index 4dcd81e40459ab121777758265f5d1b3be3e34b9..34c7ece709141f3089daa34c9ed25dbbbfab981e 100644 --- a/build/webpack.dev.conf.js +++ b/build/webpack.dev.conf.js @@ -13,6 +13,9 @@ const portfinder = require('portfinder') const HOST = process.env.HOST const PORT = process.env.PORT && Number(process.env.PORT) +//cdn 配置 +let externalConfig = [] + const devWebpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) @@ -55,7 +58,8 @@ const devWebpackConfig = merge(baseWebpackConfig, { new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', - inject: true + inject: true, + cdnConfig: externalConfig, // cdn配置 }), // copy custom myblog_static assets new CopyWebpackPlugin([ diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index c1af96193b073040cddac11208ca1d850cd690f1..b68e7e1ce921e4f05b916475015331a29f454d07 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -11,37 +11,85 @@ 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') +const env = + process.env.NODE_ENV === 'testing' + ? require('../config/test.env') + : require('../config/prod.env') + +// cdn 引入 +let externalModules = {} +//cdn 配置 +let externalConfig = [] +if (process.env.NODE_ENV === 'production') { + //生产环境 + externalModules = { + 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.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/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.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-light.min.css', + }, + { + js: '', + css: 'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css', + }, + ] +} const webpackConfig = merge(baseWebpackConfig, { + externals: externalModules, //打包忽略 module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true, - usePostCSS: true - }) + usePostCSS: true, + }), }, 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') + 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: { compress: { - warnings: false - } + warnings: false, + }, }, sourceMap: config.build.productionSourceMap, - parallel: true + parallel: true, }), // extract css into its own file new ExtractTextPlugin({ @@ -56,27 +104,28 @@ 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, + filename: + process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, - removeAttributeQuotes: 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' + chunksSortMode: 'dependency', + cdnConfig: externalConfig, // cdn配置 + onlyCss: true, //dev下只加载css }), // keep module.id stable when vendor modules does not change new webpack.HashedModuleIdsPlugin(), @@ -90,17 +139,15 @@ const webpackConfig = merge(baseWebpackConfig, { 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', - minChunks: Infinity + minChunks: Infinity, }), // This instance extracts shared chunks from code splitted chunks and bundles them // in a separate chunk, similar to the vendor chunk @@ -109,7 +156,7 @@ const webpackConfig = merge(baseWebpackConfig, { name: 'app', async: 'vendor-async', children: true, - minChunks: 3 + minChunks: 3, }), // copy custom myblog_static assets @@ -117,33 +164,50 @@ const webpackConfig = merge(baseWebpackConfig, { { from: path.resolve(__dirname, '../myblog_static'), to: config.build.assetsSubDirectory, - ignore: ['.*'] - } - ]) - ] + ignore: ['.*'], + }, + ]), + ], }) if (config.build.productionGzip) { const CompressionWebpackPlugin = require('compression-webpack-plugin') - webpackConfig.plugins.push( new CompressionWebpackPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( - '\\.(' + - config.build.productionGzipExtensions.join('|') + - ')$' + '\\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, - minRatio: 0.8 + minRatio: 0.8, }) ) } if (config.build.bundleAnalyzerReport) { - const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin + const BundleAnalyzerPlugin = + require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) } +if (config.build.isIgnoreLogs) { + const UglifyJsPlugin = require('uglifyjs-webpack-plugin') + let optimization = [ + new UglifyJsPlugin({ + uglifyOptions: { + compress: { + warnings: false, + drop_debugger: true, //去掉debugger + drop_console: true, // 去掉console + pure_funcs: ['console.log'], // 移除console + }, + }, + sourceMap: config.build.productionSourceMap, + parallel: true, + }), + ] + webpackConfig.plugins.push(...optimization) +} + module.exports = webpackConfig diff --git a/config/index.js b/config/index.js index a38aebaf548a0c38eb713ccd914c8509a8ed7433..07f3229c9760c075f87af98d38083e57fe705dd8 100644 --- a/config/index.js +++ b/config/index.js @@ -81,6 +81,7 @@ module.exports = { productionGzip: true, productionGzipExtensions: ["js", "css"], + isIgnoreLogs:true, // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` diff --git a/index.html b/index.html index af7df620cc6270932cb2ac20a8580a027549e93e..39f614fcfd26658cf44ba78650ddb4d17ea11a1c 100644 --- a/index.html +++ b/index.html @@ -6,23 +6,26 @@ yma16前端日记 + + <% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.css){ %> + + <% }}) %> + + +
+ + <% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.js){ %> + + <% }}) %> - - + + + diff --git a/myblog_static/utils/fx_background/image/background.png b/myblog_static/utils/fx_background/image/background.png index f5080dd72c807454cb042d1a0e65b54b3739f6c3..46c8a807b7746181b878d87373db8e43739f9166 100644 Binary files a/myblog_static/utils/fx_background/image/background.png and b/myblog_static/utils/fx_background/image/background.png differ diff --git a/myblog_static/utils/fx_background/image/gg.jpg b/myblog_static/utils/fx_background/image/gg.jpg index 732d131f81bc387fd4219440703da42d661201d7..c7af20344e5d99d7138ae8401ff2b72e92cbe4e0 100644 Binary files a/myblog_static/utils/fx_background/image/gg.jpg and b/myblog_static/utils/fx_background/image/gg.jpg differ diff --git a/myblog_static/utils/fx_background/image/img_fbx.jpg b/myblog_static/utils/fx_background/image/img_fbx.jpg deleted file mode 100644 index 3e9a71f784d95c4ce0ef49dd8d2456505db642c7..0000000000000000000000000000000000000000 Binary files a/myblog_static/utils/fx_background/image/img_fbx.jpg and /dev/null differ diff --git a/myblog_static/utils/fx_background/image/previewFix.jpg b/myblog_static/utils/fx_background/image/previewFix.jpg index 9b17c73cafb228841130e3d26216d3acc2f7754b..61e003894dc2b7e59cee3e5cb8049f20b7b88e3f 100644 Binary files a/myblog_static/utils/fx_background/image/previewFix.jpg and b/myblog_static/utils/fx_background/image/previewFix.jpg differ diff --git a/package.json b/package.json index 36575cc9f3472ab7522262dfc2d8f20ec636cfab..8717aed8ad9793412da35328683bca965099d15d 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "element-ui": "^2.14.1", "github-markdown-css": "^4.0.0", "highlight.js": "^10.5.0", + "image-webpack-loader": "^8.1.0", "js-cookie": "^3.0.1", "nprogress": "^0.2.0", "vue": "^2.5.2", @@ -72,7 +73,7 @@ "selenium-server": "^3.0.1", "semver": "^5.3.0", "shelljs": "^0.7.6", - "uglifyjs-webpack-plugin": "^1.1.1", + "uglifyjs-webpack-plugin": "^1.3.0", "url-loader": "^0.5.8", "vue-cli-plugin-axios": "0.0.4", "vue-loader": "^13.3.0", diff --git a/src/main.js b/src/main.js index d6849f12d326b6367543798eec31a4cfa98187f0..971194c6e4121b3f40fb05e7fae3734af4f88bd6 100644 --- a/src/main.js +++ b/src/main.js @@ -1,52 +1,89 @@ // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. +//vue cdn 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 App from './App' import importElementComponents from './importElement' import importEchartsComponents from './importEchartsComponents' - -// 样式 +// 样式cnd import 'github-markdown-css/github-markdown.css' -import 'highlight.js/styles/github.css' import 'nprogress/nprogress.css' +// 无需cdn +import useRouter from './router' +import cookies from 'vue-cookies' +import App from './App' +import 'highlight.js/styles/github.css' +import * as echarts from 'echarts/core' + + +const env = process.env.NODE_ENV +// 生产环境 +if (env === 'production') { + try { + // 路由 + const router = useRouter(Vue, VueRouter) -// 路由 -const router = useRouter(Vue, VueRouter) + Vue.config.productionTip = false + Vue.use(cookies) + Vue.use(hljs) + Vue.directive('highlight', function (el) { + const blocks = el.querySelectorAll('pre code') + blocks.forEach((block) => { + hljs.highlightBlock(block) + }) + }) + // cookie + Vue.prototype.$cookies = cookies + // axios + Vue.use(axios) + Vue.prototype.$axios = axios + window.$axios_w = axios + Vue.prototype.$echarts = echarts -// 按需引入elementui -importElementComponents(Vue) + Vue.prototype.$cookies.set('user_session', 'null') -// 按需引入echarts -importEchartsComponents(Vue) + new Vue({ + el: '#app', + router, + components: { App }, + template: '' + }) + } catch (e) { + throw Error(e) + } +} else { + // 路由 + const router = useRouter(Vue, VueRouter) -Vue.config.productionTip = false -Vue.use(cookies) + // 按需引入elementui + importElementComponents(Vue) -Vue.use(hljs) -Vue.directive('highlight', function (el) { - const blocks = el.querySelectorAll('pre code') - blocks.forEach(block => { - hljs.highlightBlock(block) + // 按需引入echarts + importEchartsComponents(Vue) + + Vue.config.productionTip = false + Vue.use(cookies) + + Vue.use(hljs) + Vue.directive('highlight', function (el) { + const blocks = el.querySelectorAll('pre code') + blocks.forEach((block) => { + hljs.highlightBlock(block) + }) + }) + // cookie + Vue.prototype.$cookies = cookies + // axios + Vue.use(axios) + Vue.prototype.$axios = axios + window.$axios_w = axios + Vue.prototype.$cookies.set('user_session', 'null') + new Vue({ + el: '#app', + router, + components: { App }, + template: '' }) -}) -// cookie -Vue.prototype.$cookies = cookies -// axios - -Vue.use(axios) -Vue.prototype.$axios = axios -window.$axios_w = axios - -Vue.prototype.$cookies.set('user_session', 'null') - -new Vue({ - el: '#app', - router, - components: { App }, - template: '' -}) +} diff --git a/src/router/index.js b/src/router/index.js index dada4c1c60f6e984ab3d896a666c69149dcf8c34..db0edfea5e7f80a6031eb0dda36574a6624fd2a7 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -9,7 +9,6 @@ const Bilicom = () => import('@/components/Bilicom') const Mavoneditor = () => import('@/components/Mavoneditor') const GrilShow = () => import('@/components/GrilShow') const Csslearn = () => import('@/components/Csslearn') - const defaultRoutes = [ { path: '/',