Skip to content

Commit

Permalink
perf:
Browse files Browse the repository at this point in the history
  • Loading branch information
xichi committed Mar 6, 2020
1 parent 6e95c0b commit 3a4cc45
Show file tree
Hide file tree
Showing 9 changed files with 391 additions and 46 deletions.
7 changes: 5 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"start:dev": "vue-cli-service serve --mode=development --open",
"start:prod": "vue-cli-service build --mode=production",
"start:test": "vue-cli-service build --mode=test",
"mock": "json-server --watch src/mock/db.json --port 3001 --routes src/mock/routes.json",
"mock": "json-server --watch src/mock/db.json --port 3000 --routes src/mock/routes.json",
"mockdev": "yarn mock | yarn start:dev"
},
"dependencies": {
Expand All @@ -18,17 +18,20 @@
"@fortawesome/free-solid-svg-icons": "^5.12.0",
"@fortawesome/vue-fontawesome": "^0.1.9",
"babel-polyfill": "^6.26.0",
"compression-webpack-plugin": "^3.1.0",
"core-js": "^3.6.4",
"element-ui": "^2.13.0",
"style-loader": "^1.1.3",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"svg-sprite-loader": "^4.2.1",
"uglifyjs-webpack-plugin": "1.1.1",
"vue": "^2.6.10",
"vue-image-crop-upload": "^2.5.0",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.1.3",
"vuex": "^3.1.1"
"vuex": "^3.1.1",
"webpack-bundle-analyzer": "^3.6.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.0.0",
Expand Down
41 changes: 36 additions & 5 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -1,18 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="./icon.png">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="./icon.png" />

<!-- 使用CDN加速的CSS文件,配置在vue.config.js下 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link
href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
rel="preload"
as="style"
/>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<!-- 使用CDN加速的JS文件,配置在vue.config.js下 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<link
href="<%= htmlWebpackPlugin.options.cdn.js[i] %>"
rel="preload"
as="script"
/>
<% } %>

<title>南邮电影协会</title>
</head>
<body>
<noscript>
<strong>We're sorry but awsome-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong
>We're sorry but awsome-ui doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
<strong>请及时联系开发者.QQ:474504964</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->

<!-- 使用CDN加速的JS文件,配置在vue.config.js下 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>

</body>
</html>
4 changes: 3 additions & 1 deletion src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ export default {
])
},
mounted(){
window.onload = ()=>{
let img = new Image();
img.src = 'http://njupt.xichi.xyz/movies/home-bg.jpg';
img.onload = ()=>{
this.$store.commit('HIDE_LOADING');
}
}
Expand Down
5 changes: 3 additions & 2 deletions src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ Vue.config.productionTip = false;

import axios from 'axios'
Vue.prototype.$http= axios

/**
* font awesome icon
*/
import { library } from '@fortawesome/fontawesome-svg-core'
/* import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
Expand All @@ -25,7 +26,7 @@ library.add(fas, far, fab)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('font-awesome-layers', FontAwesomeLayers)
Vue.component('font-awesome-layers-text', FontAwesomeLayersText)
Vue.component('font-awesome-layers-text', FontAwesomeLayersText) */

// svg 图标
import '@/icons'
Expand Down
2 changes: 1 addition & 1 deletion src/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ body
.home
width 100vw
height 100vh
background-image url("../assets/pic/home-bg.jpg")
background-image url("http://njupt.xichi.xyz/movies/home-bg.jpg")
background-size 100% 100%
position relative
.main-focus
Expand Down
14 changes: 7 additions & 7 deletions src/pages/profile.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,16 @@
class="avatar"
:style="'background-image:url(' + avatar + ');'"
></div>
<ul class="infoList">
<li>
<div class="infoList">
<div>
<p class="title">用户名:</p>
<p>{{ userInfo.username }}</p>
</li>
<li>
</div>
<div>
<p class="title">邮箱:</p>
<p>{{ userInfo.email }}</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -99,6 +99,7 @@ export default {
background-position center center
background-size cover
.infoList
padding 10px 20px
font-size 13px
text-align left
.title
Expand All @@ -121,7 +122,6 @@ export default {
> span
padding-left 5px
@media screen and (max-width: 1024px)
.userinfo
left 2rem !important
Expand Down
27 changes: 16 additions & 11 deletions src/router.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import VueRouter from 'vue-router'

const App = r => require.ensure([], () => r(require('./App.vue')), 'App')
const index = r => require.ensure([], () => r(require('@/pages/index.vue')), 'index')
const movieReview = r => require.ensure([], () => r(require('@/pages/movieReview/list.vue')), 'movieReview')
const weeklyMovie = r => require.ensure([], () => r(require('@/pages/weeklyMovie/list.vue')), 'weeklyMovie')
Expand All @@ -13,17 +14,21 @@ const WM_FAQ = r => require.ensure([], () => r(require('@/pages/weeklyMovie/FAQ.

var router = new VueRouter({
routes: [
{ path: '/', redirect: '/index' },
{ path: '/index', component: index },
{ path: '/login', component: login },
{ path: '/profile', component: profile },
{ path: '/movieReview', component: movieReview},
{ path: '/movieReview/write', component: MR_write },
{ path: '/movieReview/details/:id', component: MR_details },
{ path: '/weeklyMovie', component: weeklyMovie },
{ path: '/weeklyMovie/details/:time', component: WM_details },
{ path: '/weeklyMovie/recommend', component: WM_recommend },
{ path: '/weeklyMovie/FAQ', component: WM_FAQ }
{
path: '/', redirect: '/index', component: App,children: [
{ path: '/index', component: index },
{ path: '/login', component: login },
{ path: '/profile', component: profile },
{ path: '/movieReview', component: movieReview },
{ path: '/movieReview/write', component: MR_write },
{ path: '/movieReview/details/:id', component: MR_details },
{ path: '/weeklyMovie', component: weeklyMovie },
{ path: '/weeklyMovie/details/:time', component: WM_details },
{ path: '/weeklyMovie/recommend', component: WM_recommend },
{ path: '/weeklyMovie/FAQ', component: WM_FAQ }
]
},

]
})

Expand Down
99 changes: 97 additions & 2 deletions vue.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,99 @@ const path = require('path')
function resolve(dir) {
return path.join(__dirname, './', dir)
}
//Analyzer
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

//gzip
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzip = true // 是否使用gzip
const productionGzipExtensions = ['js', 'css'] // 需要gzip压缩的文件后缀

//去掉注释
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

//cdn
// cdn预加载使用
const externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
}

const cdn = {
// 开发环境
dev: {
css: [

],
js: [

]
},
// 生产环境
build: {
css: [

],
js: [
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js',
]
}
}

module.exports = {
publicPath: './', // 默认'/',部署应用包时的基本 URL
outputDir: 'dist',
assetsDir: '', // 相对于outputDir的静态资源(js、css、img、fonts)目录
runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
productionSourceMap: false, // 生产环境的 source map
configureWebpack: config => {
configureWebpack: config => { //简单配置
const myConfig = {}
if (process.env.NODE_ENV === 'production') {
// 1. 生产环境npm包转CDN
myConfig.externals = externals

// gzip
myConfig.plugins = []
// 2. 构建时开启gzip,降低服务器压缩对CPU资源的占用,服务器也要相应开启gzip
productionGzip && myConfig.plugins.push(
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
)

// 去掉注释
myConfig.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
},
compress: {
warnings: false,
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log']//移除console
}
}
})
)

//analyzer
myConfig.plugins.push(
new BundleAnalyzerPlugin()
)
}
return myConfig
},
chainWebpack: config => {
chainWebpack: config => { //高级配置
config.resolve.alias
.set('@', resolve('src'))
.set('_c', resolve('src/components/'))
Expand All @@ -30,6 +113,18 @@ module.exports = {
webp: { quality: 75 }
}) */

// 使用cdn
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn.build
}
if (process.env.NODE_ENV === 'development') {
args[0].cdn = cdn.dev
}
return args
})


// svg rule loader
const svgRule = config.module.rule('svg') // 找到svg-loader
svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
Expand Down
Loading

0 comments on commit 3a4cc45

Please sign in to comment.