Skip to content

xqz / dianDemo

Go to a project
Toggle navigation
Toggle navigation pinning
6c4a6a6f by sunnie
Options

about

1 parent 452ad3d7
Inline Side-by-side
Showing 12 changed files with 324 additions and 247 deletions
README.md
......@@ -2,7 +2,7 @@
基于 vue-cli3.0+webpack 4+vant ui + sass+ rem 适配方案+axios 封装，构建手机端模板脚手架
[关于项目介绍](https://juejin.im/post/5cfefc73f265da1bba58f9f7)
掘金: [vue-cli4 vant rem 移动端框架方案](https://juejin.im/post/5cfefc73f265da1bba58f9f7)
[demo](https://solui.cn/vue-h5-template/#/)建议手机端查看
......@@ -13,6 +13,19 @@
本示例 Node.js 12.14.1
### 启动项目
```bash
git clone https://github.com/sunniejs/vue-h5-template.git
cd vue-h5-template
npm install
npm run serve
```
<span id="top">目录</span>
- [√ Vue-cli4](https://cli.vuejs.org/zh/guide/)
......@@ -30,10 +43,9 @@
- [√ 配置 打包分析](#bundle)
- [√ 配置 externals 引入 cdn 资源 ](#externals)
- [√ 去掉 console.log ](#console)
- [√ splitChunks ](#console)
- [√ splitChunks 单独打包第三方模块](#chunks)
- [√ 添加 IE 兼容 ](#ie)
* Vuex
* Axios 封装
* 生产环境 cdn 优化首屏加速
......@@ -466,7 +478,7 @@ module.exports = {
outputDir: 'dist', // 生产环境构建文件的目录
assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
lintOnSave: false,
productionSourceMap: !IS_PROD, // 生产环境的 source map
productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
devServer: {
port: 9020, // 端口号
open: false, // 启动后打开浏览器
......@@ -524,9 +536,9 @@ export function getUserInfo(params) {
### <span id="alias">✅ 配置 alias 别名 </span>
```javascript
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
module.exports = {
chainWebpack: config => {
......@@ -538,40 +550,52 @@ module.exports = {
.set('views', resolve('src/views'))
.set('components', resolve('src/components'))
}
};
}
```
[▲ 回顶部](#top)
### <span id="bundle">✅ 配置 打包分析 </span>
```javascript
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
chainWebpack: config => {
// 打包分析
if (IS_PROD) {
config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
{
analyzerMode: "static"
analyzerMode: 'static'
}
]);
])
}
}
};
}
```
```bash
npm run build
```
[▲ 回顶部](#top)
### <span id="proxy">✅ 配置 externals 引入 cdn 资源 </span>
这个版本 CDN 不再引入，我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块，这个开发者可
以实际测试一下。
另外项目中使用的是公共 CDN 不稳定，域名解析也是需要时间的（如果你要使用请尽量使用同一个域名）
因为页面每次遇到`<script>`标签都会停下来解析执行，所以应该尽可能减少`<script>`标签的数量 `HTTP`请求存在一定的开销，100K
的文件比 5 个 20K 的文件下载的更快，所以较少脚本数量也是很有必要的
暂时还没有研究放到自己的 cdn 服务器上。
```javascript
const defaultSettings = require('./src/config/index.js')
const name = defaultSettings.title || 'vue mobile template'
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
// externals
const externals = {
......@@ -581,17 +605,24 @@ const externals = {
vant: 'vant',
axios: 'axios'
}
// cdn
// CDN外链，会插入到index.html中
const cdn = {
css: ['https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css'],
// 开发环境
dev: {
css: [],
js: []
},
// 生产环境
build: {
css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'],
js: [
'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js',
'https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js'
'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js'
]
}
}
module.exports = {
configureWebpack: config => {
......@@ -600,26 +631,31 @@ module.exports = {
if (IS_PROD) {
// externals
config.externals = externals
};
}
},
chainWebpack: config => {
// 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改
/**
* 添加CDN参数到htmlWebpackPlugin配置中
*/
config.plugin('html').tap(args => {
if (IS_PROD) {
// html中添加cdn
args[0].cdn = cdn
args[0].cdn = cdn.build
} else {
args[0].cdn = cdn.dev
}
return args
})
}
};
}
```
 在 public/index.html 中添加
在 public/index.html 中添加
```javascript
<!-- 使用CDN的CSS文件 -->
<% 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下 -->
......@@ -633,9 +669,12 @@ module.exports = {
### <span id="console">✅ 去掉 console.log </span>
保留了测试环境和本地环境的 `console.log`
```bash
npm i -D babel-plugin-transform-remove-console
```
在 babel.config.js 中配置
```javascript
......@@ -661,19 +700,82 @@ module.exports = {
presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],
plugins
}
```
[▲ 回顶部](#top)
### <span id="chunks">✅ splitChunks 单独打包第三方模块</span>
```javascript
module.exports = {
chainWebpack: config => {
config.when(IS_PROD, config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [
{
// 将 runtime 作为内联引入不单独存在
inline: /runtime\..*\.js$/
}
])
.end()
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
// cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块
commons: {
name: 'chunk-commons',
test: resolve('src/components'),
minChunks: 3, // 被至少用三次以上打包分离
priority: 5, // 优先级
reuseExistingChunk: true // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。
},
node_vendors: {
name: 'chunk-libs',
chunks: 'initial', // 只打包初始时依赖的第三方
test: /[\\/]node_modules[\\/]/,
priority: 10
},
vantUI: {
name: 'chunk-vantUI', // 单独将 vantUI 拆包
priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的
test: /[\\/]node_modules[\\/]_?vant(.*)/
}
}
})
config.optimization.runtimeChunk('single')
})
}
}
```
[▲ 回顶部](#top)
### <span id="ie">✅ 添加 IE 兼容 </span>
[▲ 回顶部](#top)
```bash
npm i -S @babel/polyfill
```
### <span id="console">✅ 去掉 console.log </span>
[▲ 回顶部](#top)
在 `main.js` 中添加
```javascript
import '@babel/polyfill'
```
配置 `babel.config.js`
```javascript
const plugins = []
module.exports = {
presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],
plugins
}
```
[▲ 回顶部](#top)
#### 总结
......
public/index.html
......@@ -5,11 +5,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<% for (var i in
<!-- <% 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" />
<% } %>
<% } %> -->
<title><%= webpackConfig.name %></title>
</head>
<body>
......@@ -18,10 +18,10 @@
</noscript>
<div id="app"></div>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in
<!-- <% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<% } %> -->
<!-- built files will be auto injected -->
</body>
</html>
......
src/App.vue
......@@ -4,10 +4,19 @@
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
<!-- tabbar -->
<TabBar></TabBar>
</div>
</template>
<script>
import TabBar from '@/components/TabBar'
export default {
name: 'App'
name: 'App',
components: {
TabBar
},
}
</script>
<style lang="scss">
</style>
\ No newline at end of file
......
src/assets/css/index.scss
@import './variables.scss';
@import './mixin.scss';
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.app-container{
padding-bottom:50px
}
\ No newline at end of file
......
src/components/TabBar.vue
<template>
<div>
<van-tabbar fixed v-model="active" @change="onChange">
<van-tabbar-item icon="home-o">首页</van-tabbar-item>
<van-tabbar-item icon="good-job-o">github</van-tabbar-item>
<van-tabbar fixed route>
<van-tabbar-item to="/" icon="home-o">
首页
</van-tabbar-item>
<van-tabbar-item to="/about" icon="user-o">
关于我
</van-tabbar-item>
</van-tabbar>
<!-- <van-tabbar fixed v-model="active" @change="onChange">
<van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
<van-tabbar-item to="/about" icon="user-o">关于我</van-tabbar-item>
</van-tabbar> -->
</div>
</template>
<script>
import _ from 'lodash'
console.log(_.join(['a', 'b'], '~'))
export default {
name: 'TabBar',
data() {
......@@ -18,9 +25,9 @@ export default {
}
},
methods: {
onChange(index) {
if (index === 1) window.location.href = 'https://github.com/sunniejs/vue-h5-template'
}
// onChange(index) {
// if (index === 1) window.location.href = 'https://github.com/sunniejs/vue-h5-template'
// }
}
}
</script>
......
src/config/env.development.js
......@@ -4,5 +4,6 @@ module.exports = {
baseUrl: 'http://localhost:9018', // 项目地址
baseApi: 'https://test.xxx.com/api', // 本地api请求地址
APPID: 'xxx',
APPSECRET: 'xxx'
APPSECRET: 'xxx',
$cdn:'https://imgs.solui.cn'
}
......
src/config/env.production.js
......@@ -4,5 +4,6 @@ module.exports = {
baseUrl: 'https://www.xxx.com/', // 正式项目地址
baseApi: 'https://www.xxx.com/api', // 正式api请求地址
APPID: 'xxx',
APPSECRET: 'xxx'
APPSECRET: 'xxx',
$cdn:'https://imgs.solui.cn'
}
......
src/config/env.staging.js
......@@ -3,5 +3,6 @@ module.exports = {
baseUrl: 'https://test.xxx.com', // 测试项目地址
baseApi: 'https://test.xxx.com/api', // 测试api请求地址
APPID: 'xxx',
APPSECRET: 'xxx'
APPSECRET: 'xxx',
$cdn:'https://imgs.solui.cn'
}
......
src/main.js
......@@ -5,7 +5,7 @@ import App from './App.vue'
import router from './router'
import store from './store'
// 引入全局样式
import '@/assets/css/index.scss'
// import '@/assets/css/index.scss'
// 全局引入按需引入UI库 vant
import '@/plugins/vant'
......
src/views/home/about.vue
......@@ -6,45 +6,31 @@
<h2 class="demo-home__desc">
A vue h5 template with Vant UI
</h2>
<div class="list">
<div class="item">项目地址: <a href="https://github.com/sunniejs">https://github.com/sunniejs</a></div>
<div class="item">项目作者: sunnie</div>
<div class="item"></div>
<div class="author"></div>
</div>
</div>
<van-cell icon="success" v-for="item in list" :key="item" :title="item" />
<!-- tabbar -->
<TabBar></TabBar>
</div>
</template>
<script>
import TabBar from '@/components/TabBar'
// 请求接口
import {getUserInfo} from '@/api/user.js'
import { getUserInfo } from '@/api/user.js'
export default {
components: {
TabBar
},
data() {
return {
list: [
'Vue-cli4',
'VantUI组件按需加载',
'Sass',
'Webpack 4',
'Vue-router',
'Vuex',
'Axios封装',
'rem适配方案',
'多环境配置',
'生产环境cdn优化首屏加速',
'babel低版本浏览器兼容',
'Eslint+Pettier统一开发规范'
]
}
},
computed: {},
mounted() {
this.initData()
},
......@@ -52,10 +38,10 @@ export default {
// 请求数据案例
initData() {
// 请求接口数据，仅作为展示，需要配置src->config下环境文件
const params = {user: 'sunnie'}
const params = { user: 'sunnie' }
getUserInfo(params)
.then(() => {})
.catch(() => {})
.then(() => { })
.catch(() => { })
}
}
}
......@@ -64,6 +50,7 @@ export default {
.app-container {
.warpper {
padding: 12px;
background: $background-color;
.demo-home__title {
margin: 0 0 6px;
font-size: 32px;
......@@ -85,6 +72,23 @@ export default {
color: rgba(69, 90, 100, 0.6);
font-size: 14px;
}
.list {
display: flex;
flex-direction: column;
color: #666;
font-size: 14px;
.item {
font-size: 14px;
line-height: 24px;
}
}
.author {
margin:10px auto;
width: 200px;
height: 200px;
background: url($cdn+'/weapp/me.png') center / contain no-repeat;
}
}
}
</style>
......
src/views/home/index.vue
......@@ -8,36 +8,35 @@
</h2>
</div>
<van-cell icon="success" v-for="item in list" :key="item" :title="item" />
<!-- tabbar -->
<TabBar></TabBar>
</div>
</template>
<script>
import TabBar from '@/components/TabBar'
// 请求接口
import {getUserInfo} from '@/api/user.js'
import { getUserInfo } from '@/api/user.js'
export default {
components: {
TabBar
},
data() {
return {
list: [
'Vue-cli4',
'VantUI组件按需加载',
'Sass',
' 配置多环境变量',
' VantUI 组件按需加载',
' Sass',
'Webpack 4',
'Vue-router',
'Vuex',
'Axios封装',
'rem适配方案',
'多环境配置',
'生产环境cdn优化首屏加速',
'babel低版本浏览器兼容',
'Eslint+Pettier统一开发规范'
' Axios 封装及接口管理',
'Vue-router',
'vue.config.js 基础配置',
'配置 proxy 跨域',
'配置 alias 别名',
'配置 打包分析',
'配置 externals 引入 cdn 资源',
'去掉 console.log',
'splitChunks 单独打包第三方模块',
' 添加 IE 兼容'
]
}
},
......@@ -52,19 +51,19 @@ export default {
// 请求数据案例
initData() {
// 请求接口数据，仅作为展示，需要配置src->config下环境文件
const params = {user: 'sunnie'}
const params = { user: 'sunnie' }
getUserInfo(params)
.then(() => {})
.catch(() => {})
.then(() => { })
.catch(() => { })
}
}
}
</script>
<style lang="scss" scoped>
// @import '@/assets/css/index.scss';
.app-container {
.warpper {
padding: 12px;
background: $background-color;
.demo-home__title {
margin: 0 0 6px;
font-size: 32px;
......
vue.config.js
......@@ -9,45 +9,32 @@ const name = defaultSettings.title || 'vue mobile template'
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
// externals
const externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
vant: 'vant',
axios: 'axios'
}
// const externals = {
// vue: 'Vue',
// 'vue-router': 'VueRouter',
// vuex: 'Vuex',
// vant: 'vant',
// axios: 'axios'
// }
// CDN外链，会插入到index.html中
const cdn = {
// 开发环境
dev: {
css: [
],
js: []
},
// 生产环境
build: {
css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'],
js: [
'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js'
]
}
}
// const cdn = {
// // 开发环境
// dev: {
// css: [],
// js: []
// },
// // 生产环境
// build: {
// css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'],
// js: [
// 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js',
// 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.5/vue-router.min.js',
// 'https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js',
// 'https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.2/vuex.min.js',
// 'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js',
// 'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js',
// 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
// 'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
// 'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
// 'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
// 'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js'
// ]
// }
// }
module.exports = {
publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用
......@@ -55,7 +42,7 @@ module.exports = {
outputDir: 'dist', // 生产环境构建文件的目录
assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
lintOnSave: false,
productionSourceMap: !IS_PROD, // 生产环境的 source map
productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
devServer: {
port: 9020, // 端口
open: false, // 启动后打开浏览器
......@@ -76,16 +63,27 @@ module.exports = {
// }
// }
},
css: {
extract: IS_PROD,
sourceMap: false,
loaderOptions: {
scss: {
// 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
prependData: `
@import "assets/css/index.scss";
$cdn: "${defaultSettings.$cdn}";
`
}
}
},
configureWebpack: config => {
config.name = name
// 为生产环境修改配置...
if (IS_PROD) {
// externals
config.externals = externals
}
// 为开发环境修改配置...
// if (process.env.NODE_ENV === 'development') {
// if (IS_PROD) {
// // externals
// config.externals = externals
// }
},
......@@ -100,7 +98,34 @@ module.exports = {
.set('api', resolve('src/api'))
.set('views', resolve('src/views'))
.set('components', resolve('src/components'))
// 打包分析
/**
* 添加CDN参数到htmlWebpackPlugin配置中
*/
// config.plugin('html').tap(args => {
// if (IS_PROD) {
// args[0].cdn = cdn.build
// } else {
// args[0].cdn = cdn.dev
// }
// return args
// })
/**
* 设置保留空格
*/
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.preserveWhitespace = true
return options
})
.end()
/**
* 打包分析
*/
if (IS_PROD) {
config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
{
......@@ -108,69 +133,46 @@ module.exports = {
}
])
}
/**
* 添加CDN参数到htmlWebpackPlugin配置中
*/
config.plugin('html').tap(args => {
if (IS_PROD) {
args[0].cdn = cdn.build
} else {
args[0].cdn = cdn.dev
}
config
// https://webpack.js.org/configuration/devtool/#development
.when(!IS_PROD, config => config.devtool('cheap-source-map'))
return args
config.when(IS_PROD, config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [
{
// 将 runtime 作为内联引入不单独存在
inline: /runtime\..*\.js$/
}
])
.end()
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
// cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块
commons: {
name: 'chunk-commons',
test: resolve('src/components'),
minChunks: 3, // 被至少用三次以上打包分离
priority: 5, // 优先级
reuseExistingChunk: true // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。
},
node_vendors: {
name: 'chunk-libs',
chunks: 'initial', // 只打包初始时依赖的第三方
test: /[\\/]node_modules[\\/]/,
priority: 10
},
vantUI: {
name: 'chunk-vantUI', // 单独将 vantUI 拆包
priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的
test: /[\\/]node_modules[\\/]_?vant(.*)/
}
}
})
config.optimization.runtimeChunk('single')
})
// set preserveWhitespace
// config.module
// .rule('vue')
// .use('vue-loader')
// .loader('vue-loader')
// .tap(options => {
// options.compilerOptions.preserveWhitespace = true
// return options
// })
// .end()
// config
// // https://webpack.js.org/configuration/devtool/#development
// .when(process.env.NODE_ENV === 'development', config => config.devtool('cheap-source-map'))
// config.when(IS_PROD, config => {
// config
// .plugin('ScriptExtHtmlWebpackPlugin')
// .after('html')
// .use('script-ext-html-webpack-plugin', [
// {
// // `runtime` must same as runtimeChunk name. default is `runtime`
// inline: /runtime\..*\.js$/
// }
// ])
// .end()
// config.optimization.splitChunks({
// chunks: 'all',
// cacheGroups: {
// // cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块
// commons: {
// name: 'chunk-commons',
// test: resolve('src/components'),
// minChunks: 3, // 被至少用三次以上打包分离
// priority: 5, // 优先级
// reuseExistingChunk: true // 复用其他chunk内已拥有的模块
// },
// // vantUI: {
// // name: 'chunk-vantUI', // 将 vant 打包到单独文件
// // priority: 20,
// // test: /[\\/]node_modules[\\/]_?vant(.*)/ // in order to adapt to cnpm
// // },
// libs: {
// name: 'chunk-libs',
// chunks: 'initial', // only package third parties that are initially dependent
// test: /[\\/]node_modules[\\/]/,
// priority: 10
// }
// }
// })
// config.optimization.runtimeChunk('single')
// })
}
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!