Vue-cli

FuisonDesign 發(fā)布于2019-08-21 11:53 / 563人閱讀

摘要：中一些優(yōu)化措施在一個(gè)以后綴結(jié)尾的文件，里面可以寫(xiě)使用，可以識(shí)別不同的語(yǔ)言塊，輸出到模塊輸出到的該能夠?qū)⒛０遛D(zhuǎn)換成的函數(shù)。被稱(chēng)為運(yùn)行時(shí)構(gòu)建版本，包含了所有的特點(diǎn)，體積比全功能版本小。

vue-cli 中一些優(yōu)化措施 Single File Components(SFCs)

,在一個(gè) 以.vue 后綴結(jié)尾的文件，里面可以寫(xiě)js,css,html,使用vue-loader ，可以識(shí)別不同的語(yǔ)言塊，script輸出到babel-loader,模塊輸出到vue的vue-template-loader,該loader能夠?qū)⒛０遛D(zhuǎn)換成JavaScript的render函數(shù)。

Vue.runtime.js

被稱(chēng)為vue運(yùn)行時(shí)構(gòu)建版本，包含了Vue所有的特點(diǎn)，體積比全功能版本小20kb。默認(rèn)情況下使用的是運(yùn)行時(shí)構(gòu)建版本，所以當(dāng)你使用 import vue from "vue" 來(lái)引用Vue的時(shí)候，你得到的是運(yùn)行時(shí)構(gòu)建版本，不過(guò)你能通過(guò) alias 配置項(xiàng)來(lái)改變。

production環(huán)境中去掉warn 和error信息

`if(process.env.NODE_ENV !== "production") {
   warn(("Error in " + info + ": "" + (err.toString()) + """), vm);
}`

從這里可以看出來(lái)，如果process.env.NODE_ENV 設(shè)置成production，那么提示信息在編譯過(guò)程中就會(huì)被忽略，

DefinePlugin

通過(guò)它來(lái)設(shè)置process.env.NODE_ENV的值，

使用UGlifyJsPlugin

減小代碼體積，去掉不必要的代碼塊。

     if (process.env.NODE_ENV === "production") {
             module.exports.plugins = (module.exports.plugins || []).concat([
               new webpack.DefinePlugin({
                 "process.env": {
                   NODE_ENV: ""production""
                 }}),
               new webpack.optimize.UglifyJsPlugin()
             ])
        }

Vendor file

Common Chunks插件能把你的Vendor代碼（例如Vue.js這些不會(huì)經(jīng)常改動(dòng)的依賴(lài)包）和應(yīng)用代碼（每次開(kāi)發(fā)過(guò)程中都會(huì)改動(dòng)的代碼）分離開(kāi)。
你能配置插件檢查一個(gè)依賴(lài)是否來(lái)自于node_modules，如果是，那就打包到vendor.js 文件。

hash

,也被稱(chēng)為指紋當(dāng)文件變動(dòng)后，丟棄緩存，默認(rèn)情況下，只有當(dāng)一個(gè)緩存文件過(guò)期，或者用戶(hù)手動(dòng)清除緩存，瀏覽器才會(huì)重新從服務(wù)器請(qǐng)求文件，如果服務(wù)器提示文件已經(jīng)改動(dòng)，那文件才會(huì)重新被下載（如果返回304則不會(huì)）。為了避免不必要的請(qǐng)求，我們可以在每次文件內(nèi)容改動(dòng)時(shí)，改變文件的名字，從而強(qiáng)制瀏覽器重新下載，通過(guò)在文件名稱(chēng)后面添加一個(gè)"指紋":hash，我們可以非常容易達(dá)到這個(gè)目的。

        
             output: {
             filename: "[name].[chunkhash].js"
            },

HTML Webpack Plugin

這個(gè)插件能在構(gòu)建過(guò)程中自動(dòng)在你的HTML文件里插入對(duì)構(gòu)建文件的引用。
先來(lái)把構(gòu)建文件中的引用去掉

     new HtmlWebpackPlugin({
         filename: "index.html"
         template: "index.html",
         inject: true,
         chunksSortMode: "dependency"
        })