Topic: Exculde mdbvue files using webpack
Hi, I used mdbvue in my website, now I want to reduce package size for production system, how can I split the mdb files(CSS and JS files) using webpack?
                                                    
                                                    Marcin Luczak
                                             staff                                             answered 5 years ago                                        
Hi,
If you would like to reduce the size of your production bundle you can do few things. First of all, you can use our treeshaking to import only the components you need to your package. 
If you want your production bundle use any external libraries via cdn, you can also use Webpack Externals in your vue.config.js file, e.g.:
configureWebpack: {
    externals: {
        'popper.js': {
            root: 'PopperJS',
            commonjs2: 'popper.js',
            commonjs: 'popper.js',
            amd: 'popper.js',
          },
        'moment': 'moment',
        'chart.js': 'chart.js',
    }
}
For the CSS extraction, you can try to follow this tutorial from the Webpack website.
Regards, Marcin
                                                    
                                                    shifeng
                                                                                        answered 5 years ago                                        
Hi,
Thanks in advance.
For the treeshaking when I use import XXX from 'mdbvue/lib/components/XXX, it works.But for popper or moment, I have to import from the source package, e.g.(import mdbDatePicker2 from 'mdbvue/src/components/pro/Forms/DatePicker2), then the externals for webpack works.
Mikołaj Smoleński staff commented 5 years ago
Thanks for posting your solution. Are there any more problems? Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.7.2
- Device: desktop
- Browser: chrome
- OS: win10
- Provided sample code: No
- Provided link: No