欧美在线不卡,夜夜狂射影院欧美极品,久久受视频国产,少妇翘臀亚洲一二三区,日韩亚洲国产高清免费视频,91探花三级视频在线观看网址

前言

之前用做了個博客，是一個單頁面項目，大概有十個路由直接npm run build打包出來，有一個1M的巨大js文件

先掛載到服務器上試試好家伙 這加載時間 仿佛過了半個世紀

首屏頁面整整加載了9s 光加載那個大文件就花了8s這必須得做個優(yōu)化了，沒有用戶能忍受9s的白屏而不關閉頁面的

過程中，我還順便把項目從 2.x遷移到了 3，所以接下來還會介紹一些它們在優(yōu)化上的異同

分析

2.x自帶了分析工具只要運行npm run build --

如果是 3的話，先安裝插件

cnpm install webpack-bundle-analyzer –save-dev
復制代碼

然后在vue..js中對進行配置

chainWebpack: (config) => {
    /* 添加分析工具*/
    if (process.env.NODE_ENV === 'production') {
        if (process.env.npm_config_report) {
            config
                .plugin('webpack-bundle-analyzer')
                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                .end();
            config.plugins.delete('prefetch')
        }
    } }
復制代碼

再運行npm run build --

會在瀏覽器打開一個項目打包的情況圖，便于直觀地比較各個文件的大小

可以看到 項目中所有的依賴，所有的路由，都被打包進了同一個文件中

另外，在瀏覽器中，也可以通過來查看代碼的使用狀況

紅色的是下載了但未使用的部分路由懶加載

當打包構建應用時，包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。

在一開始就下載完所有路由對應的組件文件，這明顯是不合適的，這就像下載一個app了，所以我們就需要使用路由懶加載

在.js文件中，原來的靜態(tài)引用方式

import ShowBlogs from '@/components/ShowBlogs'
routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ]
復制代碼

改為

 routes:[ path: 'Blogs',name: 'ShowBlogs',component: () => import('./components/ShowBlogs.vue')
復制代碼

以函數(shù)的形式動態(tài)引入，這樣就可以把各自的路由文件分別打包，只有在解析給定的路由時，才會下載路由組件

首屏需要加載的文件變成了橙色的部分，被小弟們分流出去了300k

如果是在 3中，我們還需要多做一步工作因為 3默認開啟(預先加載模塊)，提前獲取用戶未來可能會訪問的內(nèi)容在首屏會把這十幾個路由文件，都一口氣下載了所以我們要關閉這個功能，在vue..js中設置參考官網(wǎng)的做法：

設置完畢后，首屏就只會加載當前頁面路由的組件了

-ui按需加載

首屏加載的依賴包，其中-ui整整占了568k原本的引進方式引進了整個包：

import ElementUI from 'element-ui'
Vue.use(ElementUI)
復制代碼

但實際上我用到的組件只有按鈕vue提升首屏加載速度，分頁，表格，輸入與警告所以我們要按需引用：

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)
Vue.prototype.$alert = MessageBox.alert
復制代碼

注意注冊方法的區(qū)別，并且我們雖然用到了alert，但并不需要引入Alert組件

在.文件中添加（vue-cli 3要先安裝babel--)：: [["",{"": "-ui","": "theme-chalk"}]]

-ui小了很多，不過看到那個顯眼的table.js后想到，table組件只有后臺管理頁面用到了，不需要全局注冊，所以我們刪除main.js中Table和的引用，并在后臺組件中局部注冊

import { Table, TableColumn } from "element-ui";
components: {
    "el-table": Table,
    "el-table-column": TableColumn },
復制代碼

table就被拆分到了路由文件中組件重復打包

可以看到上圖，有兩個路由文件都引用了.js造成重復下載我們可以在的文件中，修改的配置

minChunks: 3
復制代碼

把3改為2，就會把使用2次及以上的包抽離出來，放進公共依賴文件，不過由于首頁也有復用的組件，所以首頁也會下載這個公共依賴文件

首頁下載了黃色和灰色部分拆了半天，又回到原點

當然，我們可以繼續(xù)折騰的配置來解決這個問題但在新版中，被自由度更高，更高級的代替

這也是為什么我要把項目遷移到 3（使用）默認就做了優(yōu)化，首頁只會下載灰色的部分（235K）

gzip

拆完包之后，我們再用gzip做一下壓縮安裝--

cnmp i compression-webpack-plugin -D
復制代碼

在vue..js中引入并修改配置

const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 為生產(chǎn)環(huán)境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /.js$|.html$|.css/, //匹配文件名
                    threshold: 10240, //對超過10k的數(shù)據(jù)進行壓縮
                    deleteOriginalAssets: false //是否刪除原文件
                })]
            }
        }
復制代碼

可以看到200k以上的文件被壓縮到了100k以內(nèi)

在服務器我們也要做相應的配置如果發(fā)送請求的瀏覽器支持gzip，就發(fā)送給它gzip格式的文件我的服務器是用框架搭建的只要安裝一下就能使用

const compression = require('compression')
app.use(compression())
復制代碼

注意，后面這一句，要放在所有其他中間件注冊之前

*終效果

首屏加載資源198k，加載時間1s，相比原來速度提升了90%后記：css是否要拆分

3和.x還有一個區(qū)別是 3會默認開啟一個css分離插件 每一個模塊的css文件都會分離出來，整整13個css文件，而我們的首頁就請求了4個，花費了不少的資源請求時間我們可以在vue..js中關閉它

    css: {
    // 是否使用css分離插件 ExtractTextPlugin
    extract: false,
    // 開啟 CSS source maps?
    sourceMap: false,
    // css預設器配置項
    loaderOptions: {},
    // 啟用 CSS modules for all css / pre-processor files.
    modules: false
},
復制代碼

打包出來的文件中，直接就沒有了css文件夾取而代之的是整合起來的一個js文件，負責在一開始就注入所有的樣式首屏加載文件數(shù)減少，但體積變大，*終測下來速度沒有太大差異所以，是否要css拆分就見仁見智，具體項目具體分析吧

總結

性能優(yōu)化是一個非常令人愉悅的過程，同時也是個深坑vue提升首屏加載速度，有著太多東西，本篇文章開了個頭，希望能對大家有所幫助

這是我的個人網(wǎng)站，記錄下前端學習的點滴，歡迎大家參觀

參考文章