Vue-cli

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

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

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

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

Vue.runtime.js

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

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

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

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

DefinePlugin

通過它來設(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這些不會經(jīng)常改動的依賴包）和應(yīng)用代碼（每次開發(fā)過程中都會改動的代碼）分離開。
你能配置插件檢查一個依賴是否來自于node_modules，如果是，那就打包到vendor.js 文件。

hash

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

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

HTML Webpack Plugin

這個插件能在構(gòu)建過程中自動在你的HTML文件里插入對構(gòu)建文件的引用。
先來把構(gòu)建文件中的引用去掉

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