From 06555eb5be0e3f898fc95a0ff6c75bf138ce1dfe Mon Sep 17 00:00:00 2001 From: qiuxingzhou Date: Tue, 28 Apr 2020 19:02:48 +0800 Subject: [PATCH] =?UTF-8?q?webpack=E4=BD=BF=E7=94=A8cdn?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 1 + dependencies-cdn.js | 13 +++++++++ package-lock.json | 4 +-- package.json | 6 ++-- public/app.js | 26 ++++++++++++++++++ public/index.html | 13 +++++++++ public/nginx.conf | 13 +++++++++ src/utils/AcrouUtil.js | 2 +- src/view/common/Markdown.vue | 2 +- src/view/page/GoList.vue | 10 +++---- src/view/page/GoText.vue | 17 ++++++------ vue.config.js | 53 +++++++++++++++++++++++++++++------- 12 files changed, 130 insertions(+), 30 deletions(-) create mode 100644 .env create mode 100644 dependencies-cdn.js create mode 100644 public/app.js create mode 100644 public/nginx.conf diff --git a/.env b/.env new file mode 100644 index 0000000..da444d6 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +# 所有环境默认 \ No newline at end of file diff --git a/dependencies-cdn.js b/dependencies-cdn.js new file mode 100644 index 0000000..33adfff --- /dev/null +++ b/dependencies-cdn.js @@ -0,0 +1,13 @@ +module.exports = [ + { name: 'vue', library: 'Vue', js: 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', css: '' }, + { name: 'axios', library: 'axios', js: 'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js', css: '' }, + { name: 'brace', library: 'ace', js: 'https://cdn.jsdelivr.net/npm/brace@0.11.1/index.min.js', css: '' }, + { name: 'brace/ext/language_tools', library: 'language_tools', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/ext/language_tools.js', css: '' }, + { name: 'brace/mode/html', library: 'html', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/html.js', css: '' }, + { name: 'brace/mode/javascript', library: 'javascript', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/javascript.js', css: '' }, + { name: 'brace/mode/less', library: 'less', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/less.js', css: '' }, + { name: 'brace/theme/chrome', library: 'chrome', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/theme/chrome.js', css: '' }, + { name: 'brace/snippets/javascript', library: 'javascript', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js', css: '' }, + // { name: 'vue2-ace-editor', library: 'Vue2ACEEditor', js: 'https://cdn.jsdelivr.net/npm/vue2-ace-editor@0.0.15/index.min.js', css: '' }, + { name: 'markdown-it', library: 'markdownit', js: 'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js', css: '' }, +] \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e4b52ed..a86d610 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4253,7 +4253,7 @@ }, "ejs": { "version": "2.7.4", - "resolved": "https://registry.npm.taobao.org/ejs/download/ejs-2.7.4.tgz?cache=0&sync_timestamp=1585506989655&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fejs%2Fdownload%2Fejs-2.7.4.tgz", + "resolved": "https://registry.npm.taobao.org/ejs/download/ejs-2.7.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fejs%2Fdownload%2Fejs-2.7.4.tgz", "integrity": "sha1-SGYSh1c9zFPjZsehrlLDoSDuybo=", "dev": true }, @@ -11934,7 +11934,7 @@ }, "webpack-bundle-analyzer": { "version": "3.7.0", - "resolved": "https://registry.npm.taobao.org/webpack-bundle-analyzer/download/webpack-bundle-analyzer-3.7.0.tgz?cache=0&sync_timestamp=1586846510646&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-bundle-analyzer%2Fdownload%2Fwebpack-bundle-analyzer-3.7.0.tgz", + "resolved": "https://registry.npm.taobao.org/webpack-bundle-analyzer/download/webpack-bundle-analyzer-3.7.0.tgz?cache=0&sync_timestamp=1586846559504&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-bundle-analyzer%2Fdownload%2Fwebpack-bundle-analyzer-3.7.0.tgz", "integrity": "sha1-hNpDTolEKJm4hNmtOORm0NsCpW8=", "dev": true, "requires": { diff --git a/package.json b/package.json index 6b7f213..a76ad2e 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", - "lint": "vue-cli-service lint" + "lint": "vue-cli-service lint", + "analyz": "npm_config_report=true npm run build" }, "dependencies": { "axios": "^0.19.2", @@ -25,7 +26,8 @@ "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", - "vue-template-compiler": "^2.6.11" + "vue-template-compiler": "^2.6.11", + "webpack-bundle-analyzer": "^3.7.0" }, "eslintConfig": { "root": true, diff --git a/public/app.js b/public/app.js new file mode 100644 index 0000000..febfb57 --- /dev/null +++ b/public/app.js @@ -0,0 +1,26 @@ +var styles = [ + 'https://cloud.jsonpop.cn/go2index/dist/test/app.069f50e0.css' +] +var scripts = [ + 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', + 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', + 'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js', + 'https://cdn.jsdelivr.net/npm/brace@0.11.1/index.min.js', + 'https://cdn.jsdelivr.net/npm/brace@0.11.1/ext/language_tools.js', + 'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/html.js', + 'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/javascript.js', + 'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/less.js', + 'https://cdn.jsdelivr.net/npm/brace@0.11.1/theme/chrome.js', + 'https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js', + 'https://cdn.jsdelivr.net/npm/vue2-ace-editor@0.0.15/index.min.js', + 'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js', + 'https://cloud.jsonpop.cn/go2index/dist/test/chunk-vendors.3ecd550f.js', + 'https://cloud.jsonpop.cn/go2index/dist/test/app.066f1c02.js' +] + +styles.forEach(item => { + document.write(``); +}) +scripts.forEach(item => { + document.write(``); +}) \ No newline at end of file diff --git a/public/index.html b/public/index.html index e406d1e..3614ece 100644 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,15 @@ + + <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %> + + + <% } %> + + <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %> + + <% } %> <%= htmlWebpackPlugin.options.title %> + <% } %> diff --git a/public/nginx.conf b/public/nginx.conf new file mode 100644 index 0000000..31bf056 --- /dev/null +++ b/public/nginx.conf @@ -0,0 +1,13 @@ +server { + listen 8082; + server_name localhost; + + location /0: { + proxy_pass https://ossdev.achirou.workers.dev; + } + + location / { + root /Users/jieshi/Desktop/MyWork/VueWork/go2index-theme-acrou/dist; + index index.html index.htm; + } +} \ No newline at end of file diff --git a/src/utils/AcrouUtil.js b/src/utils/AcrouUtil.js index 034d20a..ba8fd0a 100644 --- a/src/utils/AcrouUtil.js +++ b/src/utils/AcrouUtil.js @@ -64,7 +64,7 @@ export function utc2beijing(utc_datetime) { var unixtimestamp = timestamp + 8 * 60 * 60; // 时间戳转为时间 - var unixtimestamp = new Date(unixtimestamp * 1000); + unixtimestamp = new Date(unixtimestamp * 1000); var year = 1900 + unixtimestamp.getYear(); var month = "0" + (unixtimestamp.getMonth() + 1); var date = "0" + unixtimestamp.getDate(); diff --git a/src/view/common/Markdown.vue b/src/view/common/Markdown.vue index 2ad4d87..e2954a8 100644 --- a/src/view/common/Markdown.vue +++ b/src/view/common/Markdown.vue @@ -10,7 +10,7 @@ export default { option: {}, }, watch: { - option (val) { + option () { this.render() }, }, diff --git a/src/view/page/GoList.vue b/src/view/page/GoList.vue index 3b383fa..d2d9411 100644 --- a/src/view/page/GoList.vue +++ b/src/view/page/GoList.vue @@ -187,7 +187,7 @@ export default { } this.loading = false; }) - .catch(err => { + .catch(() => { this.loading = false; }); }, @@ -200,10 +200,10 @@ export default { history.go(-1); } }, - copy(path) { - path = path.replace("?a=view", ""); - // TODO - }, + // copy(path) { + // path = path.replace("?a=view", ""); + // // TODO + // }, go(path, type = "view") { if (type === "down") { path = path.replace("?a=view", ""); diff --git a/src/view/page/GoText.vue b/src/view/page/GoText.vue index 7db3df4..ff91c58 100644 --- a/src/view/page/GoText.vue +++ b/src/view/page/GoText.vue @@ -22,7 +22,7 @@ export default { }, }, watch: { - option (val) { + option () { this.content = "加载中..."; get_file(this.option, (data) => { this.content = data; @@ -35,19 +35,18 @@ export default { }; }, components: { - editor: require("vue2-ace-editor"), + editor: () => import('vue2-ace-editor'), }, methods: { - render (path) { }, editorInit (editor) { editor.setFontSize(18) editor.session.setUseWrapMode(false); - require("brace/ext/language_tools"); //language extension prerequsite... - require("brace/mode/html"); - require("brace/mode/javascript"); //language - require("brace/mode/less"); - require("brace/theme/chrome"); - require("brace/snippets/javascript"); //snippet + () => import("brace/ext/language_tools"); //language extension prerequsite... + () => import("brace/mode/html"); + () => import("brace/mode/javascript"); //language + () => import("brace/mode/less"); + () => import("brace/theme/chrome"); + () => import("brace/snippets/javascript"); //snippet }, } } diff --git a/vue.config.js b/vue.config.js index 11d28b2..cb0eef3 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,28 +1,61 @@ const path = require("path"); +const cdnDependencies = require('./dependencies-cdn') function resolve(dir) { return path.join(__dirname, dir); } + +// 基础路径 注意发布之前要先修改这里 +let publicPath = process.env.VUE_APP_PUBLIC_PATH || '/' + +// 设置不参与构建的库 +let externals = {} +cdnDependencies.forEach(item => { externals[item.name] = item.library }) + +// 引入文件的 cdn 链接 +const cdn = { + css: cdnDependencies.map(e => e.css).filter(e => e), + js: cdnDependencies.map(e => e.js).filter(e => e) +} module.exports = { + publicPath, lintOnSave: true, - // css: { - // loaderOptions: { - // sass: { - // prependData: `@import '~@/assets/style/public.scss';`, - // }, - // } - // }, + configureWebpack: config => { + const configNew = {} + if (process.env.NODE_ENV === 'production') { + configNew.externals = externals + } + return configNew + }, chainWebpack: (config) => { + /** + * 添加 CDN 参数到 htmlWebpackPlugin 配置中 + */ + config.plugin('html').tap(args => { + if (process.env.NODE_ENV === 'production') { + args[0].cdn = cdn + } else { + args[0].cdn = [] + } + return args + }) config.resolve.alias .set("@", resolve("src")) .set("@assets", resolve("src/assets")) .set("@utils", resolve("src/utils")) .set("@node_modules", resolve("node_modules")); - config.output - .filename("js/app.mini.js") - .end(); + + // 分析工具 + if (process.env.npm_config_report) { + config + .plugin('webpack-bundle-analyzer') + .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) + } }, + // 不输出 map 文件 + productionSourceMap: false, devServer: { + publicPath, proxy: { "/api": { target: "https://ossdev.achirou.workers.dev/",