Utilisation vuedu webpackmodèle de projet de développement de temps, en utilisant npm installles différents composants de l'installation en fonction et à la section locale par
défaut par importun tiers dépendances partie syntaxe introduites finira par être fusionnés en un seul fichier de package
résultant seul fichier est compressé avec succès problème trop important
Afin de résoudre le problème webpack, le externalsnœud peut être configuré et chargé avec des CDNressources externes .
Tout externalspackage de dépendance tiers déclaré dans ne sera pas conditionné.
taille préemballée n'est pas configuré 最下面有配置完之后再次打包的大小
par vue-cli 3.0le projet généré par défaut cache tous webpackles éléments de configuration
si vous avez modifié webpackles exigences de configuration par défaut peuvent être créées à la demande dans le répertoire racine du projet vue.config.jsfichier
afin que le processus de faire le projet de distribuer une configuration personnalisée
répertoire racine du projet nouveau vue.config.js
ici en plus d' une chainWebpackentrée package personnalisé
chainWebpackétape
dans srcdans le répertoire de fichiers de la nouvelle main-prod.jset main-dev.jsl'original main.jscopier tout le contenu du nouveau jsoù
le contenu à l' intérieur des deux courant identique supprimé le fichier d' originemain.js
En vue.config.jsajoutant ce qui suit la chainWebpackconfiguration
module.exports = {
chainWebpack: config => {
// 发布模式
config.when(process.env.NODE_ENV === 'production', config => {
config.entry('app').clear().add('./src/main-prod.js')
})
// 开发模式
config.when(process.env.NODE_ENV === 'development', config => {
config.entry('app').clear().add('./src/main-dev.js')
})
}
}
Et puis externalsarrangé avec un plus ici est utilisé dans le paquet de projet mis en place
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
Après l' achèvement de l'addition
, puis main-prod.jssupprimez les fichiers dans le paquet introduit les cssdocuments
ici et supprimez le fichier référencé n'est pas le même, selon le projet
alors besoin d' public/index.htmlajouter le fichier d' en- tête CDNréférence de ressource
citée est la valeur ajoutée config.setfichier
dernier dans vue uile panneau pour exécuter buildla tâche Après un emballage réussi, la taille du fichier est beaucoup plus petite
