Merge branch 'production' into 'master'

Production

See merge request !1

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([

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

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`

index.html

@@ -6,23 +6,26 @@
     <title>yma16前端日记</title>
     <link
       rel="shortcut icon"
-      href="myblog_static/utils/fx_background/image/logo.ico"
+      href="./myblog_static/utils/fx_background/image/logo.ico"
     />
     <!-- up -->
 
     <link
       rel="stylesheet"
-      href="myblog_static/utils/fx_background/css/core.css"
+      href="./myblog_static/utils/fx_background/css/core.css"
     />
 
     <style>
       body {
-        background: url(myblog_static/utils/fx_background/image/background.png);
-        background-size: cover;
-        background-repeat: no-repeat;
         overflow: hidden;
       }
     </style>
+    <!--    cdn css-->
+    <% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.css){ %>
+    <link href="<%= item.css %>" rel="stylesheet" />
+    <% }}) %>
+<!--    -->
+
   </head>
   <!-- 阿里 -->
   <style type="text/css">
@@ -36,15 +39,21 @@
   </style>
 
   <body>
+
     <div id="app"></div>
     <div id="canvas">
       <div id="life"></div>
       <div id="is"></div>
       <div id="beautiful"></div>
     </div>
+    <!-- cdn  js -->
+    <% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.js){ %>
+    <script type="text/javascript" src="<%= item.js %>"></script>
+    <% }}) %>
   </body>
-  <!-- built files will be auto injected -->
-  <!--    <script src="myblog_static/utils/fx_background/js/jquery-2.1.4.min.js"></script>-->
+
+
+<!--  资源-->
   <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
   <!-- 我的阿里图标库 -->
   <script src="https://yongma16.xyz/static/aliyunIcon/icon.js"></script>

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",

src/main.js

 // 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: '<App/>'
+        })
+    } 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: '<App/>'
     })
-})
-// 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: '<App/>'
-})
+}

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: '/',