Webpack 應用瘦身

IgnorePlugin
這是webpack內置插件
這個插件的作用是:忽略第三方包指定目錄,讓這些指定目錄不要被打包進去
舉例:
moment包
比如我們要使用moment這個第三方依賴庫,該庫主要是對時間進行格式化,並且支持多個國家語言。

moment包打包的問題
假設我們的代碼值引入了以下一個API

import moment from 'moment'

//設置語言
moment.locale('zh-cn');
let r = moment().endOf('day').fromNow();
console.log(r);


這樣打印出來的就是中文的時間,因爲我在使用這個API的時候,前面設置了語言類型moment.locale爲中文zh-cn。

但是,雖然我設置了語言爲中文,但是在打包的時候,是會將所有語言都打包進去的。這樣就導致包很大,打包速度又慢

所以,最好能夠少打包一些沒用的依賴目錄進去

而moment的包含’./locale/‘該字段路徑的文件目錄就是各國語言的目錄,比如’./locale/zh-cn’就是中文語言

IgnorePlugin的使用
該插件能夠使得指定目錄被忽略,從而使得打包變快,文件變小
使用方法:
let Webpack = require('webpack');
plugins:[
    new Webpack.IgnorePlugin(/\.\/locale/,/moment/),//moment這個庫中,如果引用了./locale/目錄的內容,就忽略掉,不會打包進去
]

問題存在與解決
我們雖然按照上面的方法忽略了包含’./locale/'該字段路徑的文件目錄,但是也使得我們使用的時候不能顯示中文語言了,所以這個時候可以手動引入中文語言的目錄

import moment from 'moment'

//設置語言

//手動引入所需要的語言包
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

let r = moment().endOf('day').fromNow();
console.log(r);


作者:俞華 
原文:https://blog.csdn.net/qq_17175013/article/details/86845624 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章