注意vue的配置文件webpack.base.conf.js ===vue-cli里是根目錄的vue.config.js的configureWebpack節(jié)點
不同版本vue請根據(jù)實際情況修改
首先查看引用資源例如echarts提取到index.html中cdn引入
一唐片、簡單方法
常用vue+vueRouter+axios+vuex+elementUI
避免打包
然后找到build/webpack.base.conf.js或者vue.config.js文件，
#vue-cli 根目錄的vue.config.js
module.exports = {
configureWebpack:()=>{
return {
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
}
}
} }
或
#webpack.base.conf.js
module.exports = {
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
}
}
這樣webpack就不會把vue.js, vue-router, element-ui庫打包了。聲明一下，我把main.js中對element的引入刪掉了，不然我發(fā)現(xiàn)打包后的app.css還是會把element的css打包進去哆姻，刪掉后就沒了。
最后index.html引入css+js
可去官網(wǎng)下載最新版
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
1.在index.html的文件頭部引入element-ui的組件庫。
引入vue
<!-- 開發(fā)版饥努，開發(fā)過程中使用此方案-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生產(chǎn)版，打包的時候使用此方案 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
引入element-ui
<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui@2.3.9/lib/index.js"></script>
2.在main.js中進行修改如下所示
// import Vue from 'vue' //需要注釋掉全局本地引入的vue
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.use(ELEMENT); //在外部引入的element-ui的為ELEMENT八回，如此寫即可
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3.在build\webpack.base.conf.js中進行修改酷愧，在module.exports中添加如下內(nèi)容：
externals:{
"element-ui":"ELEMENT",
"vue":"Vue"
},
// 思為不進行打包的文件驾诈，如不設(shè)置，外部引入的內(nèi)容將會被打包
然后你打包就會發(fā)現(xiàn)vendor文件小了很多~
二溶浴、詳版方法
為了把路由分模塊乍迄，然后每次進入一個新頁面才加載該頁面所需要的資源（也就是異步加載路由），我們可以像下面這樣使用(router.js)：
一士败、路由懶加載
const Home = () => import('./views/Home.vue');
const MyInfo = () => import('./views/MyInfo.vue');
在.babelrc中
"plugins": ["@babel/plugin-syntax-dynamic-import"]
二闯两、分離公共代碼
webpack 4.x
optimization與output同級
optimization: {
runtimeChunk: {
name: 'manifest'
},
splitChunks: {
chunks: 'async',
minChunks: 2,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: false,
cacheGroups: {
vendor: {
name: 'vendor',
// chunks 有三個可選值，”initial”, “async” 和 “all”. 分別對應(yīng)優(yōu)化時只選擇初始的chunks拱烁，所需要的chunks 還是所有chunk
chunks: 'initial',
priority: -10,
reuseExistingChunk: false,
test: /[\\/]node_modules[\\/]/
}
}
}
},
三生蚁、css懶加載
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
該插件需要webpack 4.x
//sass
{
test: /\.(sc|sa|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
]
},
plugins中：
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
}),
四、CDN引入
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
webpack.base.conf.js中
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'vant': 'vant'
},
externals與output同級戏自。
刪掉項目中import的這幾個相關(guān)的邦投，以及Vue.use()。eslint插件報錯not defined的話擅笔，前面加個window志衣，如window.VueRouter。
五猛们、js壓縮念脯、css壓縮
這個就不說了。
推薦使用webpack 4.x弯淘，在production模式下有Tree Shaking和Scope Hoisting绿店。
如果還是過大，可以使用下面插件：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
new BundleAnalyzerPlugin()
]
它會生成一個分析圖庐橙，你的文件里包含了哪些文件假勿，打包后，它會自動在瀏覽器中打開态鳖。
